feat/language-translation (new packeged react-flag-kit added + I18NSelector layout changed)

package-lock.json

@@ -28,6 +28,7 @@
         "react-dnd": "^16.0.1",
         "react-dnd-multi-backend": "^8.0.3",
         "react-dom": "^18.2.0",
+        "react-flag-kit": "^1.1.1",
         "react-i18next": "^14.1.1",
         "react-router-dom": "^6.15.0",
         "react-use-websocket": "^4.5.0",
@@ -2518,12 +2519,12 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "devOptional": true,
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -3624,9 +3625,9 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "devOptional": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -5925,6 +5926,17 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-flag-kit": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/react-flag-kit/-/react-flag-kit-1.1.1.tgz",
+      "integrity": "sha512-sgelSGSl0HxSL8lMM1TEBidgiGV2hOi+GaLNKeg10aBnL07vpwKvmfILlc1SzOdVyH48NElFyMj4NQn8F+/FHw==",
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": "^16.6.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-i18next": {
       "version": "14.1.1",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-14.1.1.tgz",
@@ -8809,12 +8821,12 @@
       }
     },
     "braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "devOptional": true,
       "requires": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       }
     },
     "browserslist": {
@@ -9587,9 +9599,9 @@
       }
     },
     "fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "devOptional": true,
       "requires": {
         "to-regex-range": "^5.0.1"
@@ -11170,6 +11182,12 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-flag-kit": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/react-flag-kit/-/react-flag-kit-1.1.1.tgz",
+      "integrity": "sha512-sgelSGSl0HxSL8lMM1TEBidgiGV2hOi+GaLNKeg10aBnL07vpwKvmfILlc1SzOdVyH48NElFyMj4NQn8F+/FHw==",
+      "requires": {}
+    },
     "react-i18next": {
       "version": "14.1.1",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-14.1.1.tgz",

package.json

@@ -23,6 +23,7 @@
     "react-dnd": "^16.0.1",
     "react-dnd-multi-backend": "^8.0.3",
     "react-dom": "^18.2.0",
+    "react-flag-kit": "^1.1.1",
     "react-i18next": "^14.1.1",
     "react-router-dom": "^6.15.0",
     "react-use-websocket": "^4.5.0",

src/ui/I18N/I18NSelector/index.tsx

+import { Checkbox, Col, Row, Tooltip } from "antd";
 import React, { useEffect } from "react";
+import { FlagIcon, FlagIconCode } from "react-flag-kit";
 import { useTranslation } from "react-i18next";
 
-import { Select } from "@/ui/Shared";
-
 import { useI18N } from "../I18NContext";
 
+const languageOptions: { value: string; label: string; flag: FlagIconCode }[] =
+  [
+    { value: "cn", label: "简体中文", flag: "CN" as FlagIconCode },
+    { value: "en", label: "English", flag: "US" as FlagIconCode },
+    { value: "fr", label: "Français", flag: "FR" as FlagIconCode },
+    { value: "ja", label: "日本語", flag: "JP" as FlagIconCode },
+    { value: "br", label: "Português do Brasil", flag: "BR" as FlagIconCode },
+    { value: "pt", label: "Português", flag: "PT" as FlagIconCode },
+    { value: "es", label: "Castellano", flag: "ES" as FlagIconCode },
+  ];
+
 export const I18NSelector: React.FC = () => {
   const { i18n } = useTranslation();
   const { language, changeLanguage } = useI18N();
 
-  const onClickLanguageChange = (language: any) => {
-    changeLanguage(language);
-    i18n.changeLanguage(language);
+  const onClickLanguageChange = (selectedLanguage: string) => {
+    changeLanguage(selectedLanguage);
+    i18n.changeLanguage(selectedLanguage);
   };
 
   useEffect(() => {
-    // Adding language state as a dependency to force re-render
-    // when the language changes
     i18n.changeLanguage(language);
-  }, [i18n.language]);
+  }, [language]);
 
   return (
-    <Select
-      value={i18n.language}
-      onChange={onClickLanguageChange}
-      options={[
-        { value: "cn", label: "简体中文" },
-        { value: "en", label: "English" },
-        { value: "fr", label: "Français" },
-        { value: "ja", label: "日本語" },
-        { value: "br", label: "Português do Brasil" },
-        { value: "pt", label: "Português" },
-        { value: "es", label: "Castellano" },
-      ]}
-    />
+    <Row gutter={[16, 16]}>
+      {languageOptions.map((lang) => (
+        <Col key={lang.value}>
+          <Tooltip title={lang.label}>
+            <Checkbox
+              checked={i18n.language === lang.value}
+              onChange={() => onClickLanguageChange(lang.value)}
+            >
+              <FlagIcon code={lang.flag} size={26} />
+            </Checkbox>
+          </Tooltip>
+        </Col>
+      ))}
+    </Row>
   );
 };