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 {feature}
+ }
+ const { label, icon } = featureData
+ return (
+
+ {featureData != null && (
+
+ )}
+ {label}
+
+ )
+}
+
+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) => {
-
+
{battlesuit.strengths.map((strength) => {
- const strengthData = battlesuitStrengths.find(
- (aStrength) => aStrength.value === strength
- )
return (
-
- {strengthData != null ? strengthData.label : strength}
-
+
+
+
)
})}
-
+