Initial commit

src/components/LanguageSwitch/LanguageSwitch.tsx

@@ -0,0 +1,71 @@
+import { GlobalOutlined, ShakeOutlined } from "@ant-design/icons";
+import { setLocale, setLocalesThunk } from "features/locale/localeSlice";
+import i18n from "i18n/i18n";
+import { useTransition } from "react";
+import { useDispatch } from "react-redux";
+import { useAppSelector } from "redux/hooks";
+import ProText from "../ProText";
+
+export function LanguageSwitch() {
+  const dispatch = useDispatch();
+  const { themeName } = useAppSelector((state) => state.theme);
+  const [isPending, startTransition] = useTransition();
+  const { isRTL } = useAppSelector((state) => state.locale);
+
+  const changeLanguage = () => {
+    startTransition(() => {
+      const key: string = isRTL ? "en" : "ar";
+      dispatch(setLocale(key));
+      // @ts-ignore
+      dispatch(setLocalesThunk(key));
+      i18n.changeLanguage(key);
+    });
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "end",
+        padding: "0 16px",
+        gap: 10,
+        position: "absolute",
+        top: "15%",
+        [isRTL ? "left" : "right"]: 0,
+        marginBottom: "10%",
+        zIndex: 1000,
+      }}
+    >
+      <GlobalOutlined
+        style={{
+          color: themeName === "dark" ? "#fff" : "#434E5C",
+          fontSize: 15,
+          marginRight: 3,
+          cursor: isPending ? "wait" : "pointer",
+          opacity: isPending ? 0.7 : 1,
+        }}
+        onClick={changeLanguage}
+      />
+      <ProText
+        style={{
+          color: themeName === "dark" ? "#fff" : "#434E5C",
+          fontSize: 14,
+          marginRight: 3,
+          opacity: isPending ? 0.7 : 1,
+          [isRTL ? "marginLeft" : "marginRight"]: 3,
+        }}
+      >
+        {isPending ? "..." : isRTL ? "English" : "Arabic"}
+      </ProText>
+      <ShakeOutlined
+        style={{
+          color: themeName === "dark" ? "#fff" : "#434E5C",
+          fontSize: 15,
+          marginRight: 3,
+          [isRTL ? "marginLeft" : "marginRight"]: 3,
+        }}
+      />
+    </div>
+  );
+}