feat(i18n): new language switcher in config page

MetaCubeX · Sep 22, 2023 · 21d479a · 21d479a
1 parent 81bab5d
commit 21d479a
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 32 deletions.
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -3,17 +3,16 @@ import {
   IconFileStack,
   IconGlobe,
   IconHome,
-  IconLanguage,
   IconMenu,
   IconNetwork,
   IconPalette,
   IconRuler,
   IconSettings,
 } from '@tabler/icons-solidjs'
 import { For, ParentComponent, Show, createSignal } from 'solid-js'
-import { Button, LogoText } from '~/components'
-import { LANG, ROUTES, themes } from '~/constants'
-import { setLocale, useI18n } from '~/i18n'
+import { LogoText } from '~/components'
+import { ROUTES, themes } from '~/constants'
+import { useI18n } from '~/i18n'
 import { setCurTheme } from '~/signals'
 
 const Nav: ParentComponent<{ href: string; tooltip: string }> = ({
@@ -152,14 +151,6 @@ export const Header = () => {
 
       <div class="navbar-end">
         <div class="flex items-center gap-2">
-          <Button
-            class="btn-circle btn-secondary btn-sm"
-            onClick={() =>
-              setLocale((locale) => (locale === LANG.EN ? LANG.ZH : LANG.EN))
-            }
-            icon={<IconLanguage />}
-          />
-
           <ThemeSwitcher />
         </div>
       </div>

diff --git a/src/i18n/en.ts b/src/i18n/en.ts
@@ -101,4 +101,6 @@ export default {
   tunModeStack: 'TUN Mode Stack',
   tunDeviceName: 'TUN Device Name',
   interfaceName: 'Interface Name',
+  en: 'English',
+  zh: 'Chinese',
 }
diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts
@@ -103,4 +103,6 @@ export default {
   tunModeStack: 'TUN 模式堆栈',
   tunDeviceName: 'TUN 设备名称',
   interfaceName: '接口名称',
+  en: '英文',
+  zh: '中文',
 } satisfies Dict
diff --git a/src/pages/Config.tsx b/src/pages/Config.tsx
@@ -26,8 +26,8 @@ import {
   upgradingBackend,
 } from '~/apis'
 import { Button, ConfigTitle } from '~/components'
-import { MODE_OPTIONS, ROUTES, themes } from '~/constants'
-import { useI18n } from '~/i18n'
+import { LANG, MODE_OPTIONS, ROUTES, themes } from '~/constants'
+import { locale, setLocale, useI18n } from '~/i18n'
 import {
   autoSwitchTheme,
   favDayTheme,
@@ -354,6 +354,17 @@ const ConfigForm = () => {
 const ConfigForXd = () => {
   const [t] = useI18n()
 
+  const languages = [
+    {
+      label: () => t('en'),
+      value: LANG.EN,
+    },
+    {
+      label: () => t('zh'),
+      value: LANG.ZH,
+    },
+  ]
+
   return (
     <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
       <div class="flex flex-col gap-2">
@@ -375,14 +386,11 @@ const ConfigForXd = () => {
 
               <select
                 class="select select-bordered"
+                value={favDayTheme()}
                 onChange={(e) => setFavDayTheme(e.target.value)}
               >
                 <For each={themes}>
-                  {(theme) => (
-                    <option selected={favDayTheme() === theme} value={theme}>
-                      {theme}
-                    </option>
-                  )}
+                  {(theme) => <option value={theme}>{theme}</option>}
                 </For>
               </select>
             </div>
@@ -392,30 +400,46 @@ const ConfigForXd = () => {
 
               <select
                 class="select select-bordered"
+                value={favNightTheme()}
                 onChange={(e) => setFavNightTheme(e.target.value)}
               >
                 <For each={themes}>
-                  {(theme) => (
-                    <option selected={favNightTheme() === theme} value={theme}>
-                      {theme}
-                    </option>
-                  )}
+                  {(theme) => <option value={theme}>{theme}</option>}
                 </For>
               </select>
             </div>
           </div>
         </Show>
       </div>
 
-      <div class="flex flex-col items-center">
-        <ConfigTitle>{t('useTwemoji')}</ConfigTitle>
+      <div class="flex flex-col gap-2">
+        <div class="flex flex-col items-center">
+          <ConfigTitle>{t('useTwemoji')}</ConfigTitle>
 
-        <input
-          type="checkbox"
-          class="toggle"
-          checked={useTwemoji()}
-          onChange={(e) => setUseTwemoji(e.target.checked)}
-        />
+          <input
+            type="checkbox"
+            class="toggle"
+            checked={useTwemoji()}
+            onChange={(e) => setUseTwemoji(e.target.checked)}
+          />
+        </div>
+
+        <div class="flex flex-col">
+          <ConfigTitle>{t('switchLanguage')}</ConfigTitle>
+
+          <select
+            class="select select-bordered"
+            onChange={(e) => setLocale(e.target.value as LANG)}
+          >
+            <For each={languages}>
+              {(lang) => (
+                <option selected={locale() === lang.value} value={lang.value}>
+                  {lang.label()}
+                </option>
+              )}
+            </For>
+          </select>
+        </div>
       </div>
     </div>
   )