42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
/** @jsxImportSource theme-ui */
|
|
import { Flex, Text } from '@theme-ui/components'
|
|
import { useRouter } from 'next/router'
|
|
import { assetsBucketBaseUrl } from '../../lib/consts'
|
|
import { battlesuitFeatures } from '../../lib/honkai3rd/battlesuits'
|
|
import { translate } from '../../lib/i18n'
|
|
import SquareImageBox from './SquareImageBox'
|
|
|
|
interface BattlesuitFeatureLabelProps {
|
|
feature: string
|
|
}
|
|
|
|
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, krLabel } = featureData
|
|
|
|
const translatedLabel = translate(locale, { 'ko-KR': krLabel }, label)
|
|
|
|
return (
|
|
<Flex sx={{ alignItems: 'center' }}>
|
|
{featureData != null && (
|
|
<SquareImageBox
|
|
size={30}
|
|
src={`${assetsBucketBaseUrl}/honkai3rd/${icon}.png`}
|
|
alt={translatedLabel}
|
|
mr={1}
|
|
/>
|
|
)}
|
|
<Text>{translatedLabel}</Text>
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
export default BattlesuitFeatureLabel
|