From 30bac56aa33b7a08e80f0bca382b199b593288e8 Mon Sep 17 00:00:00 2001
From: Sakura Knoll <s4kura.knoll@gmail.com>
Date: Fri, 31 Dec 2021 18:27:38 +0900
Subject: [PATCH] Add type label to battlesuit show page

---
 src/components/atoms/TypeLabel.tsx            | 37 +++++++++++++++++++
 .../honkai3rd/battlesuits/[battlesuitId].tsx  |  7 ++--
 2 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 src/components/atoms/TypeLabel.tsx

diff --git a/src/components/atoms/TypeLabel.tsx b/src/components/atoms/TypeLabel.tsx
new file mode 100644
index 00000000..46396c61
--- /dev/null
+++ b/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
+}
diff --git a/src/pages/honkai3rd/battlesuits/[battlesuitId].tsx b/src/pages/honkai3rd/battlesuits/[battlesuitId].tsx
index b140c278..ca1ce666 100644
--- a/src/pages/honkai3rd/battlesuits/[battlesuitId].tsx
+++ b/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