diff --git a/src/components/atoms/BattlesuitFeatureLabel.tsx b/src/components/atoms/BattlesuitFeatureLabel.tsx new file mode 100644 index 00000000..badb9002 --- /dev/null +++ b/src/components/atoms/BattlesuitFeatureLabel.tsx @@ -0,0 +1,32 @@ +import { Flex, Text } from '@theme-ui/components' +import { battlesuitStrengths } from '../../lib/safeData' +import SquareImageBox from './SquareImageBox' + +interface BattlesuitFeatureLabelProps { + feature: string +} + +const BattlesuitFeatureLabel = ({ feature }: BattlesuitFeatureLabelProps) => { + const featureData = battlesuitStrengths.find( + (strength) => strength.value === feature + ) + if (featureData == null) { + return {feature} + } + const { label, icon } = featureData + return ( + + {featureData != null && ( + + )} + {label} + + ) +} + +export default BattlesuitFeatureLabel diff --git a/src/pages/honkai3rd/battlesuits/[battlesuitId].tsx b/src/pages/honkai3rd/battlesuits/[battlesuitId].tsx index ca1ce666..175e71ee 100644 --- a/src/pages/honkai3rd/battlesuits/[battlesuitId].tsx +++ b/src/pages/honkai3rd/battlesuits/[battlesuitId].tsx @@ -2,6 +2,7 @@ import { Box, Flex, Heading, Paragraph, Text } from '@theme-ui/components' import { NextPageContext } from 'next' import Image from 'next/image' import React from 'react' +import BattlesuitFeatureLabel from '../../../components/atoms/BattlesuitFeatureLabel' import BattlesuitRankIcon from '../../../components/atoms/BattlesuitRankIcon' import TypeLabel from '../../../components/atoms/TypeLabel' import ValkyrieLabel from '../../../components/atoms/ValkyrieLabel' @@ -13,7 +14,6 @@ import { getBattlesuitById, listBattlesuits, } from '../../../data/honkai3rd/battlesuits' -import { battlesuitStrengths } from '../../../lib/safeData' interface BattlesuitShowPageProps { battlesuit: BattlesuitData @@ -72,18 +72,15 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => { - + {battlesuit.strengths.map((strength) => { - const strengthData = battlesuitStrengths.find( - (aStrength) => aStrength.value === strength - ) return ( - - {strengthData != null ? strengthData.label : strength} - + + + ) })} - +