From 47ba4834f4fbd1a3c3bc87ddff4e38d73bf2f98f Mon Sep 17 00:00:00 2001
From: Sakura Knoll <s4kura.knoll@gmail.com>
Date: Sat, 8 Jan 2022 19:00:54 +0900
Subject: [PATCH] Translate StigmataCard

---
 src/components/molecules/StigmataCard.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/molecules/StigmataCard.tsx b/src/components/molecules/StigmataCard.tsx
index 10e1aac0..64299fd2 100644
--- a/src/components/molecules/StigmataCard.tsx
+++ b/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)}