Show battlesuit feature icon

2021-12-31 18:33:59 +09:00
parent 30bac56aa3
commit 1501ed14b3
2 changed files with 38 additions and 9 deletions
@@ -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 <Text>{feature}</Text>
+  }
+  const { label, icon } = featureData
+  return (
+    <Flex sx={{ alignItems: 'center' }}>
+      {featureData != null && (
+        <SquareImageBox
+          size={30}
+          src={`/assets/honkai3rd/${icon}.png`}
+          alt={label}
+          mr={1}
+        />
+      )}
+      <Text>{label}</Text>
+    </Flex>
+  )
+}
+
+export default BattlesuitFeatureLabel