Initial commit

src/components/ArabicPrice/ArabicPrice.tsx

@@ -0,0 +1,90 @@
+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;