Add translation for battlesuit list page

src/components/atoms/BattlesuitFeatureLabel.tsx

@@ -1,6 +1,8 @@
 /** @jsxImportSource theme-ui */
 import { Flex, Text } from '@theme-ui/components'
+import { useRouter } from 'next/router'
 import { battlesuitFeatures } from '../../lib/honkai3rd/battlesuits'
+import { translate } from '../../lib/i18n'
 import SquareImageBox from './SquareImageBox'
 
 interface BattlesuitFeatureLabelProps {
@@ -8,24 +10,29 @@ interface BattlesuitFeatureLabelProps {
 }
 
 const BattlesuitFeatureLabel = ({ feature }: BattlesuitFeatureLabelProps) => {
+  const { locale } = useRouter()
   const featureData = battlesuitFeatures.find(
     (aFeature) => aFeature.value === feature
   )
   if (featureData == null) {
     return <Text>{feature}</Text>
   }
-  const { label, icon } = featureData
+
+  const { label, icon, krLabel } = featureData
+
+  const translatedLabel = translate(locale, { 'ko-KR': krLabel }, label)
+
   return (
     <Flex sx={{ alignItems: 'center' }}>
       {featureData != null && (
         <SquareImageBox
           size={30}
           src={`/assets/honkai3rd/${icon}.png`}
-          alt={label}
+          alt={translatedLabel}
           mr={1}
         />
       )}
-      <Text>{label}</Text>
+      <Text>{translatedLabel}</Text>
     </Flex>
   )
 }

src/components/atoms/TypeLabel.tsx

@@ -1,5 +1,8 @@
 /** @jsxImportSource theme-ui */
 import { Flex, Text } from '@theme-ui/components'
+import { useRouter } from 'next/router'
+import { battlesuitTypes } from '../../lib/honkai3rd/battlesuits'
+import { translate } from '../../lib/i18n'
 import { capitalize } from '../../lib/string'
 import SquareImageBox from './SquareImageBox'
 
@@ -8,7 +11,17 @@ interface TypeLabelProps {
 }
 
 const TypeLabel = ({ type }: TypeLabelProps) => {
-  const label = capitalize(type)
+  const battlesuitType = battlesuitTypes.find((aType) => aType.value === type)
+
+  const { locale } = useRouter()
+  const label =
+    battlesuitType != null
+      ? translate(
+          locale,
+          { 'ko-KR': battlesuitType.krLabel },
+          battlesuitType.label
+        )
+      : capitalize(type)
 
   return (
     <Flex sx={{ alignItems: 'center' }}>

src/components/atoms/ValkyrieLabel.tsx

@@ -1,6 +1,8 @@
 /** @jsxImportSource theme-ui */
 import { Flex, Text } from '@theme-ui/components'
+import { useRouter } from 'next/router'
 import { valkyries } from '../../lib/honkai3rd/battlesuits'
+import { translate } from '../../lib/i18n'
 import SquareImageBox from './SquareImageBox'
 
 interface ValkyrieLabelProps {
@@ -8,9 +10,12 @@ interface ValkyrieLabelProps {
 }
 
 const ValkyrieLabel = ({ valkyrie }: ValkyrieLabelProps) => {
-  const { icon, label } = valkyries.find(
+  const { icon, label, krLabel } = valkyries.find(
     (aValkyrie) => aValkyrie.value === valkyrie
-  ) || { label: valkyrie }
+  ) || { label: valkyrie, krLabel: valkyrie }
+  const { locale } = useRouter()
+
+  const translatedLabel = translate(locale, { 'ko-KR': krLabel }, label)
 
   return (
     <Flex sx={{ alignItems: 'center' }}>
@@ -18,11 +23,11 @@ const ValkyrieLabel = ({ valkyrie }: ValkyrieLabelProps) => {
         <SquareImageBox
           size={30}
           src={`/assets/honkai3rd/${icon}.png`}
-          alt={label}
+          alt={translatedLabel}
           mr={1}
         />
       )}
-      <Text>{label}</Text>
+      <Text>{translatedLabel}</Text>
     </Flex>
   )
 }

src/components/organisms/Honkai3rdNavigator.tsx

@@ -2,7 +2,7 @@
 import { NavLink, Heading, Flex } from '@theme-ui/components'
 import NextLink from 'next/link'
 import { useRouter } from 'next/router'
-import { useTranslation } from 'next-i18next'
+import { useTranslation } from '../../lib/i18n'
 
 const Honkai3rdNavigator = () => {
   const router = useRouter()