feat: i18n

src/routes/setting/navs.tsx

@@ -4,108 +4,107 @@ import Logins from "./config/Logins";
 import ConfigFirebase from "./config/Firebase";
 import ConfigSMTP from "./config/SMTP";
 import APIConfig from "./APIConfig";
-import License from "./License";
+import License from "./License/License";
 import Widget from "./Widget";
 import ManageMembers from "../../common/component/ManageMembers";
 import FAQ from "../../common/component/FAQ";
-import ConfigAgora from "./config/Agora";
+// import ConfigAgora from "./config/Agora";
 import { useAppSelector } from "../../app/store";
+import { useTranslation } from "react-i18next";
 
 const navs = [
   {
-    title: "General",
+    title: "general",
     items: [
       {
         name: "overview",
-        title: "Overview",
         component: <Overview />
       },
+      {
+        name: "my_account",
+        component: <MyAccount />
+      },
       {
         name: "members",
-        title: "Members",
         component: <ManageMembers />,
         admin: true
-      }
+      },
     ]
   },
   {
-    title: "User",
-    items: [
-      {
-        name: "my_account",
-        title: "My Account",
-        component: <MyAccount />
-      }
-    ]
-  },
-  {
-    title: "Configuration",
+    title: "config",
     items: [
       {
         name: "firebase",
-        title: "Firebase",
         component: <ConfigFirebase />
       },
-      {
-        name: "agora",
-        title: "Agora",
-        component: <ConfigAgora />
-      },
+      // {
+      //   name: "agora",
+      //   component: <ConfigAgora />
+      // },
       {
         name: "smtp",
-        title: "SMTP",
         component: <ConfigSMTP />
       },
       {
-        name: "social_login",
-        title: "Login Methods",
+        name: "login_method",
         component: <Logins />
       },
       {
-        name: "api",
-        title: "Third-party APP",
+        name: "third_app",
         component: <APIConfig />
       },
       {
         name: "widget",
-        title: "Widget",
         component: <Widget />
       },
       {
         name: "license",
-        title: "License",
         component: <License />
       }
     ],
     admin: true
   },
   {
-    title: "About",
+    title: "about",
     items: [
       {
         name: "faq",
-        title: "FAQ",
         component: <FAQ />
       },
       {
         name: "terms",
-        title: "Terms & Privacy",
         component: "Terms & Privacy"
       },
       {
         name: "feedback",
-        title: "Feedback",
-        component: "feedback"
+        component: "Email: han@privoce.com\nWechat: yanggc_2013"
       }
     ]
   }
 ];
 
 const useNavs = () => {
+  const { t } = useTranslation("setting");
   const loginUser = useAppSelector((store) => {
     return store.authData.user;
   });
-  return navs.filter((nav) => {
+  const transformedNavs = navs.map(n => {
+    const { title, items, ...rest } = n;
+    return {
+      title: t(`nav.${title}`),
+      items: items.map(item => {
+        const { name, ...rest } = item;
+        return {
+          name,
+          title: t(`nav.${name}`),
+          ...rest
+        };
+      }),
+      ...rest
+    };
+  });
+  return transformedNavs.filter((nav) => {
     if (loginUser?.is_admin) {
       return true;
     } else {