Translate StigmataCard

src/components/molecules/StigmataCard.tsx

@@ -1,14 +1,22 @@
 /** @jsxImportSource theme-ui */
 import { Box, Card, Text } from '@theme-ui/components'
+import { useRouter } from 'next/router'
 import { StigmataData } from '../../lib/honkai3rd/stigmata'
+import { translate } from '../../lib/i18n'
 import PageLink from '../atoms/PageLink'
 import SquareImageBox from '../atoms/SquareImageBox'
 
 interface StigmataCardProps {
-  stigmata: Pick<StigmataData, 'id' | 'name' | 'rarity'>
+  stigmata: Pick<StigmataData, 'id' | 'name' | 'rarity' | 'krName'>
 }
 
 const StigmataCard = ({ stigmata }: StigmataCardProps) => {
+  const { locale } = useRouter()
+  const stigmataName = translate(
+    locale,
+    { 'ko-KR': stigmata.krName },
+    stigmata.name
+  )
   return (
     <Card
       sx={{
@@ -20,7 +28,7 @@ const StigmataCard = ({ stigmata }: StigmataCardProps) => {
       <PageLink href={`/honkai3rd/stigmata/${stigmata.id}`}>
         <SquareImageBox
           size={100}
-          alt={stigmata.name}
+          alt={stigmataName}
           src={`/assets/honkai3rd/stigmata/icon-${stigmata.id}.png`}
         />
         <Box
@@ -32,7 +40,7 @@ const StigmataCard = ({ stigmata }: StigmataCardProps) => {
             textAlign: 'center',
           }}
         >
-          <Text>{stigmata.name}</Text>
+          <Text>{stigmataName}</Text>
         </Box>
         <Box sx={{ fontSize: 1, textAlign: 'center' }}>
           {'⭐'.repeat(stigmata.rarity)}