fix arab

src/components/UnitList.tsx

@@ -17,7 +17,11 @@ const UnitList = ({ units, startIndex = 0 }: UnitListProps) => {
           }`}
         >
           <div>№</div>
-          <div className="flex justify-between w-full">
+          <div
+            className={`flex justify-between w-full ${
+              i18n.language === "ar" ? "flex-row-reverse" : ""
+            }`}
+          >
             <div>{t("Unit")}</div>
             <div>{t("Area (m)")}</div>
           </div>
@@ -29,8 +33,12 @@ const UnitList = ({ units, startIndex = 0 }: UnitListProps) => {
               i18n.language === "ar" ? "flex-row-reverse" : ""
             }  ${index % 2 === 0 ? "bg-[#EAE5E0] rounded-lg" : ""}`}
           >
-            <div>{startIndex + index + 1}</div>
-            <div className="flex justify-between w-full">
+            <div className={`text-[#858585]`}>{startIndex + index + 1}</div>
+            <div
+              className={`flex justify-between w-full ${
+                i18n.language === "ar" ? "flex-row-reverse" : ""
+              }`}
+            >
               <div>{t(`${unit.title}`)}</div>
               <div>{unit.value}</div>
             </div>

src/components/desktop/Appartment/ParameterDescription.tsx

@@ -3,7 +3,7 @@ import useStore from "../../../store/store";
 
 const ParameterDescription = () => {
   const { currentVilla } = useStore();
-  const [t] = useTranslation();
+  const [t, i18n] = useTranslation();
 
   return (
     <div className="flex py-6 gap-6 items-center justify-center select-none">
@@ -12,22 +12,38 @@ const ParameterDescription = () => {
       </h2>
       <div className="h-8 bg-[#DDD7D6] w-[1px]" />
       <div className="flex flex-col">
-        <div className="flex gap-4 justify-between">
+        <div
+          className={`flex gap-4 ${
+            i18n.language === "ar" ? "flex-row-reverse justify-between" : ""
+          }`}
+        >
           <div className="text-[#666668]">{t("VillaTheme")}</div>
           <div>{t(`${currentVilla && currentVilla.villaTheme}`)}</div>
         </div>
-        <div className="flex gap-4">
+        <div
+          className={`flex gap-4 ${
+            i18n.language === "ar" ? "flex-row-reverse justify-between" : ""
+          }`}
+        >
           <div className="text-[#666668]">{t("Total no. of Bedrooms")}</div>
           <div>{currentVilla && currentVilla.totalCountBedroms}</div>
         </div>
       </div>
       <div className="h-8 bg-[#DDD7D6] w-[1px]" />
       <div className="flex flex-col">
-        <div className="flex gap-4 justify-between">
+        <div
+          className={`flex gap-4 justify-between ${
+            i18n.language === "ar" ? "flex-row-reverse" : ""
+          }`}
+        >
           <div className="text-[#666668]">{t("PlotArea")}</div>
           <div>{currentVilla && currentVilla.plotArea}</div>
         </div>
-        <div className="flex gap-4">
+        <div
+          className={`flex gap-4 ${
+            i18n.language === "ar" ? "flex-row-reverse justify-between" : ""
+          }`}
+        >
           <div className="text-[#666668]">{t("Total Build up Area, m 2")}</div>
           <div>{currentVilla && currentVilla.totalBuildUpArea}</div>
         </div>