91 lines
2.0 KiB
TypeScript
91 lines
2.0 KiB
TypeScript
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useAppSelector } from "redux/hooks";
|
|
import ProText from "../ProText";
|
|
|
|
interface ArabicPriceProps {
|
|
price: number | string;
|
|
style?: React.CSSProperties;
|
|
strong?: boolean;
|
|
type?: "secondary" | "success" | "warning" | "danger";
|
|
className?: string;
|
|
}
|
|
|
|
const ArabicPrice: React.FC<ArabicPriceProps> = ({
|
|
price,
|
|
style = {},
|
|
strong = false,
|
|
type,
|
|
className,
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
const { isRTL } = useAppSelector((state) => state.locale);
|
|
|
|
// Format the price to ensure it has 2 decimal places
|
|
const formattedPrice = typeof price === "number" ? price.toFixed(2) : price;
|
|
|
|
return (
|
|
<ProText
|
|
strong={strong}
|
|
type={type}
|
|
className={className}
|
|
style={{
|
|
display: "inline-flex",
|
|
alignItems: "baseline",
|
|
gap: "0.1em",
|
|
lineHeight: 1,
|
|
...style,
|
|
}}
|
|
>
|
|
{isRTL ? (
|
|
<>
|
|
<span
|
|
style={{
|
|
verticalAlign: "baseline",
|
|
lineHeight: 1,
|
|
}}
|
|
>
|
|
{formattedPrice}
|
|
</span>
|
|
<span style={{margin: "0 0.1em"}} />
|
|
<span
|
|
style={{
|
|
fontSize: "0.9em",
|
|
verticalAlign: "baseline",
|
|
lineHeight: 1,
|
|
position: "relative",
|
|
top: -3,
|
|
}}
|
|
>
|
|
{t("common.omanCurrency")}
|
|
</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<span
|
|
style={{
|
|
verticalAlign: "baseline",
|
|
lineHeight: 1,
|
|
display: "inline-block",
|
|
}}
|
|
>
|
|
{formattedPrice}
|
|
</span>
|
|
<span
|
|
style={{
|
|
fontSize: "0.9em",
|
|
verticalAlign: "baseline",
|
|
lineHeight: 1,
|
|
display: "inline-block",
|
|
}}
|
|
>
|
|
{t("common.omanCurrency")}
|
|
</span>
|
|
</>
|
|
)}
|
|
</ProText>
|
|
);
|
|
};
|
|
|
|
export default ArabicPrice;
|