translate 50%

src/components/mobile/Main/ViewOnMapButton.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import ViewOnMapIcon from "../../../icons/ViewOnMapIcon";
 
 type ViewOnMapProps = {
@@ -6,14 +7,17 @@ type ViewOnMapProps = {
 };
 
 const ViewOnMapButton = ({ onClick, isVillaSelected }: ViewOnMapProps) => {
+  const [t, i18n] = useTranslation();
   return (
     <button
-      className={`w-1/2 border-r flex justify-center gap-1 items-center hover:bg-secondary transition-all duration-200 ${
-        isVillaSelected ? "bg-[#EAE5E0] rounded-es-2xl" : ""
-      }`}
+      className={`w-1/2 flex justify-center gap-1 items-center hover:bg-secondary transition-all duration-200 ${
+        i18n.language === "ar"
+          ? "rounded-ee-2xl border-l flex-row-reverse"
+          : "rounded-es-2xl border-r"
+      } ${isVillaSelected ? "bg-[#EAE5E0] rounded-es-2xl " : ""}`}
       onClick={onClick}
     >
-      View on Map
+      {t("ViewOnMap")}
       <ViewOnMapIcon />
     </button>
   );