feat(settings): i18n

tokanada · Oct 6, 2022 · 5da258a · 5da258a
1 parent 432e50a
commit 5da258a
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 11 deletions.
diff --git a/locales/en/settings.json b/locales/en/settings.json
@@ -0,0 +1,10 @@
+{
+    "Settings": "Settings",
+    "My box": "My box",
+    "Save": "Save",
+    "Success": "Success",
+    "Your settings have been saved.": "Your settings have been saved.",
+    "Browser compatiblity problem": "Browser compatiblity problem",
+    "localstorage_unsupported": "The browser doesn't support localStorage. Please update your browser or switch to normal mode to save settings.",
+    "mybox_header": "After setting the box, card possession status will be shown while searching."
+}
diff --git a/locales/zh-hans/settings.json b/locales/zh-hans/settings.json
@@ -0,0 +1,10 @@
+{
+    "Settings": "设置",
+    "My box": "我的 box",
+    "Save": "保存",
+    "Success": "成功",
+    "Your settings have been saved.": "你的设置已经保存。",
+    "Browser compatiblity problem": "浏览器兼容性问题",
+    "localstorage_unsupported": "此浏览器不支持 localStorage。请升级至更新的浏览器或切换至一般模式以保存设置。",
+    "mybox_header": "在此设置 box 后，搜索时将会显示卡片的持有状态。"
+}
diff --git a/pages/settings.tsx b/pages/settings.tsx
@@ -18,7 +18,9 @@ const clone = rfdc({
 export type LocalBox = Partial<Record<CharacterId, boolean[]>>
 
 const SettingsPage = () => {
+    const $t = useTranslations('settings')
     const $vc = useTranslations('v-chr')
+    const $c = useTranslations('common')
 
     const [localBox, setLocalBox] = useState<LocalBox>({})
     const { data: Cards } = useFrontendApi('cards')
@@ -43,27 +45,26 @@ const SettingsPage = () => {
     const saveLocalBox = () => {
         if (!window.localStorage) {
             showNotification({
-                title: '浏览器兼容性问题',
-                message:
-                    '此浏览器不支持 localStorage。请升级至更新的浏览器以保存设置。',
+                title: $t('Browser compatiblity problem'),
+                message: $t('localstorage_unsupported'),
                 color: 'red',
             })
 
             return
         }
         localStorage.setItem(LOCALSTORAGE_BOX_TAG, JSON.stringify(localBox))
         showNotification({
-            title: '成功',
-            message: '你的设置已经保存。',
+            title: $t('Success'),
+            message: $t('Your settings have been saved.'),
             color: 'green',
         })
     }
 
     return (
         <>
-            <Title title="设置" />
-            <h3>我的 box</h3>
-            <p>在此设置 box 后，搜索时将会显示卡片的持有状态。</p>
+            <Title title={$t('Settings')} />
+            <h3>{$t('My box')}</h3>
+            <p>{$t('mybox_header')}</p>
             {Cards ? (
                 <Grid gutter={20}>
                     {Object.entries(Cards).map(([name], _key) => (
@@ -102,15 +103,15 @@ const SettingsPage = () => {
                     ))}
                 </Grid>
             ) : (
-                <p>正在加载卡片列表。</p>
+                <p>{$c('Loading...')}</p>
             )}
             <Button variant="outline" onClick={() => saveLocalBox()}>
-                保存
+                {$t('Save')}
             </Button>
         </>
     )
 }
 
-export const getStaticProps = getI18nProps(['v-chr'])
+export const getStaticProps = getI18nProps(['settings', 'v-chr'])
 
 export default SettingsPage