feat(i18n): add i18n support for navs

src/components/Header.tsx

@@ -1,3 +1,4 @@
+import { useI18n } from '@solid-primitives/i18n'
 import { A, useLocation, useNavigate } from '@solidjs/router'
 import {
   IconArrowsExchange,
@@ -64,40 +65,42 @@ const ThemeSwitcher = () => (
   </div>
 )
 
-const navs = () => [
-  {
-    href: '/overview',
-    name: 'Overview',
-    icon: <IconHome />,
-  },
-  {
-    href: '/proxies',
-    name: 'Proxies',
-    icon: <IconGlobe />,
-  },
-  {
-    href: '/rules',
-    name: 'Rules',
-    icon: <IconRuler />,
-  },
-  {
-    href: '/conns',
-    name: 'Connections',
-    icon: <IconNetwork />,
-  },
-  {
-    href: '/logs',
-    name: 'Logs',
-    icon: <IconFileStack />,
-  },
-  {
-    href: '/config',
-    name: 'Config',
-    icon: <IconSettings />,
-  },
-]
-
 export const Header = () => {
+  const [t] = useI18n()
+
+  const navs = () => [
+    {
+      href: '/overview',
+      name: t('navs.overview'),
+      icon: <IconHome />,
+    },
+    {
+      href: '/proxies',
+      name: t('navs.proxies'),
+      icon: <IconGlobe />,
+    },
+    {
+      href: '/rules',
+      name: t('navs.rules'),
+      icon: <IconRuler />,
+    },
+    {
+      href: '/conns',
+      name: t('navs.connections'),
+      icon: <IconNetwork />,
+    },
+    {
+      href: '/logs',
+      name: t('navs.logs'),
+      icon: <IconFileStack />,
+    },
+    {
+      href: '/config',
+      name: t('navs.config'),
+      icon: <IconSettings />,
+    },
+  ]
+
   const location = useLocation()
   const navigate = useNavigate()
 

src/i18n/index.ts

@@ -1,8 +0,0 @@
-import { createI18nContext } from '@solid-primitives/i18n'
-
-export const i18nContext = createI18nContext(
-  {
-    en: {},
-  },
-  'en',
-)

src/i18n/index.tsx

@@ -0,0 +1,33 @@
+import { I18nContext, createI18nContext } from '@solid-primitives/i18n'
+import { ParentComponent } from 'solid-js'
+import { useLanguage } from '~/signals'
+
+const dict = {
+  'en-US': {
+    navs: {
+      overview: 'Overview',
+      proxies: 'Proxies',
+      rules: 'Rules',
+      connections: 'Connections',
+      config: 'Config',
+    },
+  },
+  'zh-Hans': {
+    navs: {
+      overview: '概览',
+      proxies: '代理',
+      rules: '规则',
+      connections: '连接',
+      config: '配置',
+    },
+  },
+}
+
+export const I18nProvider: ParentComponent = (props) => {
+  const { lang } = useLanguage()
+  const value = createI18nContext(dict, lang())
+
+  return (
+    <I18nContext.Provider value={value}>{props.children}</I18nContext.Provider>
+  )
+}

src/index.tsx

@@ -1,21 +1,20 @@
 /* @refresh reload */
 import '~/index.css'
 
-import { I18nContext } from '@solid-primitives/i18n'
 import { Router, hashIntegration } from '@solidjs/router'
 import { render } from 'solid-js/web'
-import { App } from './App'
-import { i18nContext } from './i18n'
+import { App } from '~/App'
+import { I18nProvider } from '~/i18n'
 
 const root = document.getElementById('root')
 
 render(
   () => (
-    <I18nContext.Provider value={i18nContext}>
+    <I18nProvider>
       <Router source={hashIntegration()}>
         <App />
       </Router>
-    </I18nContext.Provider>
+    </I18nProvider>
   ),
   root!,
 )

src/signals/index.ts

@@ -44,3 +44,12 @@ export const useRequest = () => {
     },
   })
 }
+
+export const useLanguage = () => {
+  const [lang, setLang] = makePersisted(createSignal(navigator.language), {
+    name: 'lang',
+    storage: localStorage,
+  })
+
+  return { lang, setLang }
+}