language switcher

src/locales/en.json

@@ -28,6 +28,11 @@
     "proxy": {
       "title": "Proxy",
       "automatic": "Automatic"
+    },
+    "languages": {
+      "title": "Language",
+      "japanese": "Japanese",
+      "english": "English"
     }
   }
 }

src/locales/ja.json

@@ -28,6 +28,11 @@
     "proxy": {
       "title": "プロキシ",
       "automatic": "自動"
+    },
+    "languages": {
+      "title": "言語",
+      "japanese": "日本語",
+      "english": "英語"
     }
   }
 }

src/pages/Settings/Dropdown.tsx

@@ -7,12 +7,14 @@ interface Option {
 
 const Dropdown = ({
   name,
+  storageKey,
   options,
-  storageKey
+  refresh
 }: {
   name: string;
   storageKey: string;
   options: Option[];
+  refresh: boolean;
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -45,6 +47,9 @@ const Dropdown = ({
                   setIsOpen(false);
                   setChoice(option.id);
                   localStorage.setItem(storageKey, option.id);
+                  if (refresh == true) {
+                    window.location.reload()
+                  }
                 }}
               >
                 {option.label}

src/pages/Settings/Misc.tsx

@@ -5,11 +5,10 @@ import { useTranslation } from "react-i18next";
 
 const Misc = ({ id, active }) => {
   const { t } = useTranslation();
-  const engines = [
-    { id: "automatic", label: t("settings.proxy.automatic") },
-    { id: "ultraviolet", label: "Ultraviolet" },
-    { id: "rammerhead", label: "Rammerhead" },
-    { id: "dynamic", label: "Dynamic" }
+  
+  const languages = [
+    { id: "ja", label: t("settings.languages.japanese") },
+    { id: "en-US", label: t("settings.languages.english") }
   ];
 
   return (
@@ -26,9 +25,10 @@ const Misc = ({ id, active }) => {
         className="content-card flex flex-row flex-wrap justify-around"
       >
         <Dropdown
-          name={t("settings.proxy.title")}
-          storageKey="proxy"
-          options={engines}
+          name={t("settings.languages.title")}
+          storageKey="i18nextLng"
+          options={languages}
+          refresh={true}
         />
       </motion.div>
     </motion.div>

src/pages/Settings/Proxy.tsx

@@ -25,7 +25,12 @@ const Proxy = ({ id, active }) => {
         variants={settingsPageVariant}
         className="content-card flex flex-row flex-wrap justify-around"
       >
-        <Dropdown name={t("settings.proxy.title")} storageKey="proxy" options={engines} />
+        <Dropdown
+          name={t("settings.proxy.title")}
+          storageKey="proxy"
+          options={engines}
+          refresh={false}
+        />
       </motion.div>
     </motion.div>
   );