Translate weapon list page

src/pages/honkai3rd/weapons/index.tsx

@@ -11,10 +11,12 @@ import { WeaponData } from '../../../lib/honkai3rd/weapons'
 import WeaponCard from '../../../components/molecules/WeaponCard'
 import { getI18NProps } from '../../../server/i18n'
 import { NextPageContext } from 'next'
+import { useTranslation } from 'next-i18next'
+import { translate } from '../../../lib/i18n'
 
 type WeaponListItemData = Pick<
   WeaponData,
-  'id' | 'name' | 'rarity' | 'category'
+  'id' | 'name' | 'rarity' | 'category' | 'krName'
 >
 
 interface WeaponListPageProps {
@@ -22,20 +24,21 @@ interface WeaponListPageProps {
 }
 
 const weaponFilterOptions = [
-  { value: 'all', label: 'All' },
-  { value: 'pistol', label: 'Pistols' },
-  { value: 'katana', label: 'Katanas' },
-  { value: 'cannon', label: 'Cannons' },
-  { value: 'greatsword', label: 'Greatswords' },
-  { value: 'cross', label: 'Crosses' },
-  { value: 'gauntlet', label: 'Gauntlets' },
-  { value: 'scythe', label: 'Scythes' },
-  { value: 'lance', label: 'Lances' },
-  { value: 'bow', label: 'Bows' },
+  { value: 'all', label: 'All', krLabel: '전체' },
+  { value: 'pistol', label: 'Pistols', krLabel: '쌍권총' },
+  { value: 'katana', label: 'Katanas', krLabel: '태도' },
+  { value: 'cannon', label: 'Cannons', krLabel: '대포' },
+  { value: 'greatsword', label: 'Greatswords', krLabel: '대검' },
+  { value: 'cross', label: 'Crosses', krLabel: '십자가' },
+  { value: 'gauntlet', label: 'Gauntlets', krLabel: '건틀릿' },
+  { value: 'scythe', label: 'Scythes', krLabel: '낫' },
+  { value: 'lance', label: 'Lances', krLabel: '랜스' },
+  { value: 'bow', label: 'Bows', krLabel: '활' },
 ]
 
 const WeaponListPage = ({ weaponDataList }: WeaponListPageProps) => {
-  const { query } = useRouter()
+  const { query, locale } = useRouter()
+  const { t } = useTranslation()
 
   const filter = useMemo(() => {
     if (query.filter == null) {
@@ -64,17 +67,17 @@ const WeaponListPage = ({ weaponDataList }: WeaponListPageProps) => {
           ]}
         />
 
-        <Heading as='h1'>Weapons</Heading>
+        <Heading as='h1'>{t('weapons-list.weapons')}</Heading>
         <Box>
-          <Heading as='h3'>Filter by Category</Heading>
+          <Heading as='h3'>{t('weapons-list.filter-by-category')}</Heading>
           <Flex mb={2} sx={{ flexWrap: 'wrap' }}>
-            {weaponFilterOptions.map(({ value, label }) => {
+            {weaponFilterOptions.map(({ value, label, krLabel }) => {
               return (
                 <FilterButton
                   key={value}
                   active={value === filter}
                   value={value}
-                  label={label}
+                  label={translate(locale, { 'ko-KR': krLabel }, label)}
                   m={1}
                 />
               )
@@ -100,7 +103,7 @@ export async function getStaticProps({ locale }: NextPageContext) {
   return {
     props: {
       weaponDataList: listWeapons().map((weapon) => {
-        return pick(['name', 'id', 'rarity', 'category'], weapon)
+        return pick(['name', 'id', 'rarity', 'category', 'krName'], weapon)
       }),
       ...(await getI18NProps(locale)),
     },