Translation support for dropdown.tsx component

src/locales/en.json

@@ -24,6 +24,10 @@
       "tab": "Tab",
       "custom": "Customization",
       "misc": "Misc"
+    },
+    "proxy": {
+      "title": "Proxy",
+      "automatic": "Automatic"
     }
   }
 }

src/locales/ja.json

@@ -24,6 +24,10 @@
       "tab": "タブ",
       "custom": "カスタマイズ",
       "misc": "その他"
+    },
+    "proxy": {
+      "title": "プロキシ",
+      "automatic": "自動"
     }
   }
 }

src/pages/Home.tsx

@@ -1,7 +1,6 @@
 import { useState } from "preact/hooks";
 import { useTranslation } from "react-i18next";
 import { HeaderRoute } from "../components/HeaderRoute";
-
 export function Home() {
   const [isFocused, setIsFocused] = useState(false);
   const { t } = useTranslation();

src/pages/Settings/Dropdown.tsx

@@ -1,10 +1,29 @@
-import { useState } from "preact/hooks";
+import { useState, useEffect } from "preact/hooks";
 
-const Dropdown = ({ name, options }: { name: string; options: string[] }) => {
+interface Option {
+  id: string;
+  label: string; // Translations CAN be passed
+}
+
+const Dropdown = ({
+  name,
+  options,
+  storageKey
+}: {
+  name: string;
+  storageKey: string;
+  options: Option[];
+}) => {
   const [isOpen, setIsOpen] = useState(false);
-  const [choice, setChoice] = useState(
+
-    localStorage.getItem(name) || options[0]
+  const [choice, setChoice] = useState(() => {
-  );
+    return localStorage.getItem(storageKey) || options[0]?.id || "";
+  });
+
+  // update on localstorage change
+  useEffect(() => {
+    setChoice(localStorage.getItem(storageKey) || options[0]?.id || "");
+  }, [storageKey, options]);
 
   return (
     <div className="relative text-center">
@@ -13,20 +32,22 @@ const Dropdown = ({ name, options }: { name: string; options: string[] }) => {
         className="font-roboto flex h-14 w-56 cursor-pointer flex-col items-center justify-center rounded-2xl border border-input-border-color bg-input text-center text-xl"
         onClick={() => setIsOpen(!isOpen)}
       >
-        <div className="select-none">{choice}</div>
+        <div className="select-none">
+          {options.find((o) => o.id === choice)?.label}
+        </div>
         {isOpen && (
           <div className="absolute top-full w-full border">
-            {options.map((option: string) => (
+            {options.map((option) => (
               <div
-                key={option}
+                key={option.id}
                 className="hover:bg-dropdown-option-hover-color"
                 onClick={() => {
                   setIsOpen(false);
-                  setChoice(option);
+                  setChoice(option.id);
-                  localStorage.setItem(name, option);
+                  localStorage.setItem(storageKey, option.id);
                 }}
               >
-                {option}
+                {option.label}
               </div>
             ))}
           </div>
@@ -37,4 +58,3 @@ const Dropdown = ({ name, options }: { name: string; options: string[] }) => {
 };
 
 export default Dropdown;
-

src/pages/Settings/Misc.tsx

@@ -1,19 +1,37 @@
 import { motion } from "framer-motion";
 import { tabContentVariant, settingsPageVariant } from "./Variants";
+import Dropdown from "./Dropdown";
+import { useTranslation } from "react-i18next";
 
-const Misc = ({ id, active }) => (
+const Misc = ({ id, active }) => {
-  <motion.div
+  const { t } = useTranslation();
-    role="tabpanel"
+  const engines = [
-    id={id}
+    { id: "automatic", label: t("settings.proxy.automatic") },
-    className="tab-content"
+    { id: "ultraviolet", label: "Ultraviolet" },
-    variants={tabContentVariant}
+    { id: "rammerhead", label: "Rammerhead" },
-    animate={active ? "active" : "inactive"}
+    { id: "dynamic", label: "Dynamic" }
-    initial="inactive"
+  ];
-  >
+
-    <motion.div variants={settingsPageVariant} className="content-card">
+  return (
-      <h1>Misc settings</h1>
+    <motion.div
+      role="tabpanel"
+      id={id}
+      className="tab-content"
+      variants={tabContentVariant}
+      animate={active ? "active" : "inactive"}
+      initial="inactive"
+    >
+      <motion.div
+        variants={settingsPageVariant}
+        className="content-card flex flex-row flex-wrap justify-around"
+      >
+        <Dropdown
+          name={t("settings.proxy.title")}
+          storageKey="proxy"
+          options={engines}
+        />
+      </motion.div>
     </motion.div>
-  </motion.div>
+  );
-);
+};
-
 export default Misc;

src/pages/Settings/Proxy.tsx

@@ -1,9 +1,16 @@
 import { motion } from "framer-motion";
 import { tabContentVariant, settingsPageVariant } from "./Variants";
 import Dropdown from "./Dropdown";
+import { useTranslation } from "react-i18next";
 
 const Proxy = ({ id, active }) => {
-  const engines = ["Automatic", "Ultraviolet", "Rammerhead", "Dynamic"];
+  const { t } = useTranslation();
+  const engines = [
+    { id: "automatic", label: t("settings.proxy.automatic") },
+    { id: "ultraviolet", label: "Ultraviolet" },
+    { id: "rammerhead", label: "Rammerhead" },
+    { id: "dynamic", label: "Dynamic" }
+  ];
 
   return (
     <motion.div
@@ -18,7 +25,7 @@ const Proxy = ({ id, active }) => {
         variants={settingsPageVariant}
         className="content-card flex flex-row flex-wrap justify-around"
       >
-        <Dropdown name="Engine" options={engines} />
+        <Dropdown name={t("settings.proxy.title")} storageKey="proxy" options={engines} />
       </motion.div>
     </motion.div>
   );