Add type label to battlesuit show page

src/components/atoms/TypeLabel.tsx

@@ -0,0 +1,37 @@
+import { Flex, Text } from '@theme-ui/components'
+import SquareImageBox from './SquareImageBox'
+
+interface TypeLabelProps {
+  type: string
+}
+
+const TypeLabel = ({ type }: TypeLabelProps) => {
+  const label = type.replace(/^\w/, (c) => c.toUpperCase())
+  return (
+    <Flex sx={{ alignItems: 'center' }}>
+      {isValidType(type) && (
+        <SquareImageBox
+          size={30}
+          src={`/assets/honkai3rd/type-icons/${type}.png`}
+          alt={label}
+          mr={1}
+        />
+      )}
+      <Text>{label}</Text>
+    </Flex>
+  )
+}
+
+export default TypeLabel
+
+function isValidType(type: string): boolean {
+  switch (type) {
+    case 'mecha':
+    case 'biologic':
+    case 'psychic':
+    case 'quantum':
+    case 'imginary':
+      return true
+  }
+  return false
+}

src/pages/honkai3rd/battlesuits/[battlesuitId].tsx

@@ -3,6 +3,7 @@ import { NextPageContext } from 'next'
 import Image from 'next/image'
 import React from 'react'
 import BattlesuitRankIcon from '../../../components/atoms/BattlesuitRankIcon'
+import TypeLabel from '../../../components/atoms/TypeLabel'
 import ValkyrieLabel from '../../../components/atoms/ValkyrieLabel'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
 import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
@@ -68,10 +69,10 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
           <Box p={2} sx={{ borderBottom: 'default' }}>
             <ValkyrieLabel valkyrie={battlesuit.valkyrie} />
           </Box>
+          <Box p={2} sx={{ borderBottom: 'default' }}>
+            <TypeLabel type={battlesuit.type} />
+          </Box>
           <Box p={2}>
-            <Text mr={1}>
-              {battlesuit.type.replace(/^\w/, (c) => c.toUpperCase())}
-            </Text>
             {battlesuit.strengths.map((strength) => {
               const strengthData = battlesuitStrengths.find(
                 (aStrength) => aStrength.value === strength