feat(colors): i18n

tokanada · Oct 6, 2022 · 432e50a · 432e50a
1 parent 98e5376
commit 432e50a
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git a/locales/en/colors.json b/locales/en/colors.json
@@ -0,0 +1,4 @@
+{
+    "Colors": "Colors",
+    "colors_header": "The colors come from in-game data. Also for reference: <a>Image from official Twitter</a>."
+}
diff --git a/locales/zh-hans/colors.json b/locales/zh-hans/colors.json
@@ -0,0 +1,4 @@
+{
+    "Colors": "系列颜色",
+    "colors_header": "此颜色根据游戏内部数据得到。亦可参考<a>官方 Twitter</a>提供的图片。"
+}
diff --git a/pages/colors.tsx b/pages/colors.tsx
@@ -48,14 +48,18 @@ const ColorsPage = ({
     CharacterList: APIResponseOf<'Character/List'>
 }) => {
     const $vc = useTranslations('v-chr')
+    const $t = useTranslations('colors')
+
     return (
         <>
             <p>
-                此颜色根据游戏内部数据得到。亦可参考
-                <a href="https://twitter.com/idolypride/status/1332167024433192961">
-                    官方 Twitter
-                </a>{' '}
-                提供的图片。
+                {$t.rich('colors_header', {
+                    a: (c) => (
+                        <a href="https://twitter.com/idolypride/status/1332167024433192961">
+                            {c}
+                        </a>
+                    ),
+                })}
             </p>
             <div className="flex flex-col">
                 {ColorOrder.map((row, _i) => (
@@ -79,14 +83,15 @@ const ColorsPage = ({
 
 const SkeletonColorsPage = () => {
     const { data: CharacterList } = useApi('Character/List')
+    const $t = useTranslations('colors')
 
     const allData = {
         CharacterList,
     }
 
     return (
         <>
-            <Title title="系列颜色" />
+            <Title title={$t('Colors')} />
             {allFinished(allData) ? (
                 <ColorsPage {...allData} />
             ) : (
@@ -96,6 +101,6 @@ const SkeletonColorsPage = () => {
     )
 }
 
-export const getStaticProps = getI18nProps(['vendor', 'v-chr'])
+export const getStaticProps = getI18nProps(['colors', 'vendor', 'v-chr'])
 
 export default SkeletonColorsPage