Style battlesuit show page

src/components/atoms/BattlesuitRankIcon.tsx

@@ -0,0 +1,42 @@
+import SquareImageBox from './SquareImageBox'
+
+interface BattlesuitRankIconProps {
+  size: number
+  rank: string
+  m?: number | string
+  mx?: number | string
+  my?: number | string
+  ml?: number | string
+  mr?: number | string
+  mt?: number | string
+  mb?: number | string
+}
+
+const BattlesuitRankIcon = ({
+  size,
+  rank,
+  m,
+  mx,
+  my,
+  ml,
+  mr,
+  mt,
+  mb,
+}: BattlesuitRankIconProps) => {
+  return (
+    <SquareImageBox
+      size={size}
+      src={`/assets/honkai3rd/rank-icons/${rank}-rank.png`}
+      alt={`${rank} rank`}
+      m={m}
+      mx={mx}
+      my={my}
+      ml={ml}
+      mr={mr}
+      mt={mt}
+      mb={mb}
+    />
+  )
+}
+
+export default BattlesuitRankIcon

src/components/atoms/ValkyrieLabel.tsx

@@ -0,0 +1,54 @@
+import { Text } from '@theme-ui/components'
+
+interface ValkyrieLabelProps {
+  valkyrie: string
+}
+
+const ValkyrieLabel = ({ valkyrie }: ValkyrieLabelProps) => {
+  const { label } = getLabelData(valkyrie)
+  return <Text>{label}</Text>
+}
+
+export default ValkyrieLabel
+
+function getLabelData(valkyrie: string): { label: string; icon?: string } {
+  switch (valkyrie) {
+    case 'kiana':
+      return { icon: 'kiana', label: 'Kiana Kaslana' }
+    case 'mei':
+      return { icon: 'mei', label: 'Raiden Mei' }
+    case 'bronya':
+      return { icon: 'bronya', label: 'Bronya Zaychik' }
+    case 'himeko':
+      return { icon: 'himeko', label: 'Murata Himeko' }
+    case 'theresa':
+      return { icon: 'theresa', label: 'Theresa Apocalypse' }
+    case 'fuhua':
+      return { icon: 'fuhua', label: 'Fu Hua' }
+    case 'rita':
+      return { icon: 'rita', label: 'Rita Rossweisse' }
+    case 'sakura':
+      return { icon: 'sakura', label: 'Yae Sakura' }
+    case 'kallen':
+      return { icon: 'kallen', label: 'Kallen Kaslana' }
+    case 'olenyevas':
+      return { icon: 'olenyevas', label: 'Olenyevas Sisters' }
+    case 'seele':
+      return { icon: 'seele', label: 'Seele Vollerei' }
+    case 'durandal':
+      return { icon: 'durandal', label: 'Durandal' }
+    case 'fischl':
+      return { icon: 'fischl', label: 'Fischl' }
+    case 'elysia':
+      return { icon: 'elysia', label: 'Elysia' }
+    case 'mobius':
+      return { icon: 'mobius', label: 'Mobius' }
+    case 'raven':
+      return { icon: 'raven', label: 'Raven' }
+    case 'carole':
+      return { icon: 'carole', label: 'Carole Pepper' }
+  }
+  return {
+    label: valkyrie,
+  }
+}