From 1501ed14b333e8c762940279f3b2d713c3255e88 Mon Sep 17 00:00:00 2001
From: Sakura Knoll <s4kura.knoll@gmail.com>
Date: Fri, 31 Dec 2021 18:33:59 +0900
Subject: [PATCH] Show battlesuit feature icon

---
 .../atoms/BattlesuitFeatureLabel.tsx          | 32 +++++++++++++++++++
 .../honkai3rd/battlesuits/[battlesuitId].tsx  | 15 ++++-----
 2 files changed, 38 insertions(+), 9 deletions(-)
 create mode 100644 src/components/atoms/BattlesuitFeatureLabel.tsx

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 <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
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) => {
           <Box p={2} sx={{ borderBottom: 'default' }}>
             <TypeLabel type={battlesuit.type} />
           </Box>
-          <Box p={2}>
+          <Flex p={2}>
             {battlesuit.strengths.map((strength) => {
-              const strengthData = battlesuitStrengths.find(
-                (aStrength) => aStrength.value === strength
-              )
               return (
-                <Text mx={1} key={strength}>
-                  {strengthData != null ? strengthData.label : strength}
-                </Text>
+                <Box mr={2} key={strength}>
+                  <BattlesuitFeatureLabel feature={strength} />
+                </Box>
               )
             })}
-          </Box>
+          </Flex>
         </Box>
 
         <BattlesuitSkillGroupCard