61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
/** @jsxImportSource theme-ui */
|
|
import { Box, Card, Text } from '@theme-ui/components'
|
|
import { useRouter } from 'next/router'
|
|
import { BattlesuitData } from '../../lib/honkai3rd/battlesuits'
|
|
import { translate } from '../../lib/i18n'
|
|
import PageLink from '../atoms/PageLink'
|
|
import SquareImageBox from '../atoms/SquareImageBox'
|
|
|
|
interface BattlesuitCardProps {
|
|
battlesuit: Pick<BattlesuitData, 'id' | 'name' | 'krName'>
|
|
hidden?: boolean
|
|
}
|
|
|
|
const BattlesuitCard = ({ battlesuit, hidden }: BattlesuitCardProps) => {
|
|
const { locale } = useRouter()
|
|
|
|
const battlesuitName = translate(
|
|
locale,
|
|
{ 'ko-KR': battlesuit.krName },
|
|
battlesuit.name
|
|
)
|
|
|
|
return (
|
|
<Card
|
|
className={hidden ? 'hidden' : ''}
|
|
sx={{
|
|
width: 120,
|
|
padding: 2,
|
|
margin: 2,
|
|
'&.hidden': {
|
|
display: 'none',
|
|
},
|
|
}}
|
|
>
|
|
<PageLink
|
|
href={`/honkai3rd/battlesuits/${battlesuit.id}`}
|
|
key={battlesuit.id}
|
|
>
|
|
<SquareImageBox
|
|
alt={battlesuitName}
|
|
src={`/assets/honkai3rd/battlesuits/portrait-${battlesuit.id}.png`}
|
|
size={100}
|
|
/>
|
|
<Box
|
|
sx={{
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
width: '100%',
|
|
whiteSpace: 'nowrap',
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
<Text>{battlesuitName}</Text>
|
|
</Box>
|
|
</PageLink>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default BattlesuitCard
|