Extract secondary label

src/components/atoms/SecondaryLabel.tsx

@@ -0,0 +1,25 @@
+/** @jsxImportSource theme-ui */
+import { Text } from '@theme-ui/components'
+import React from 'react'
+
+interface SeconadryLabelProps {
+  children: React.ReactNode
+}
+
+const SecondaryLabel = ({ children }: SeconadryLabelProps) => {
+  return (
+    <Text
+      as='small'
+      sx={{
+        fontSize: 2,
+        color: 'secondary',
+        fontWeight: 'heading',
+        fontFamily: 'monospace',
+      }}
+    >
+      {children}
+    </Text>
+  )
+}
+
+export default SecondaryLabel

src/components/pages/SingleStigmataPage.tsx

@@ -1,12 +1,13 @@
 /** @jsxImportSource theme-ui */
 import { StigmataData, StigmataSet } from '../../lib/honkai3rd/stigmata'
 import Image from 'next/image'
-import { Box, Heading, Text, Paragraph, Card, Flex } from '@theme-ui/components'
+import { Box, Heading, Paragraph, Card, Flex } from '@theme-ui/components'
 import PageLink from '../../components/atoms/PageLink'
 import StigmataCard from '../../components/molecules/StigmataCard'
 import Breadcrumb from '../../components/organisms/Breadcrumb'
 import Honkai3rdNavigator from '../../components/organisms/Honkai3rdNavigator'
 import { capitalize } from '../../lib/string'
+import SecondaryLabel from '../atoms/SecondaryLabel'
 
 export interface SingleStigmataPageProps {
   type: 'single'
@@ -72,15 +73,15 @@ const SingleStigmataPage = ({
 
         {stigmataSet != null && (
           <Card>
-            <Heading as='h2' m={0} p={2} sx={{ borderBottom: 'default' }}>
+            <Box sx={{ p: 2, borderBottom: 'default' }}>
-              <PageLink href={`/honkai3rd/stigmata/${stigmataSet.id}-set`}>
+              <Heading as='h2' mb={1}>
-                {stigmataSet.name}
+                <PageLink href={`/honkai3rd/stigmata/${stigmataSet.id}-set`}>
-              </PageLink>
+                  {stigmataSet.name}
-              <br />
+                </PageLink>
-              <Text as='small' sx={{ fontSize: 2, color: 'secondary' }}>
+              </Heading>
-                Set
+              <SecondaryLabel>Set</SecondaryLabel>
-              </Text>
+            </Box>
-            </Heading>
+
             <Flex
               p={2}
               sx={{

src/components/pages/StigmataSetPage.tsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource theme-ui */
-import { Box, Heading, Text, Paragraph, Card, Flex } from '@theme-ui/components'
+import { Box, Heading, Paragraph, Card, Flex } from '@theme-ui/components'
 import React from 'react'
 import PageLink from '../../components/atoms/PageLink'
 import StigmataCard from '../../components/molecules/StigmataCard'
@@ -7,6 +7,7 @@ import Breadcrumb from '../../components/organisms/Breadcrumb'
 import Honkai3rdNavigator from '../../components/organisms/Honkai3rdNavigator'
 import { StigmataData, StigmataSet } from '../../lib/honkai3rd/stigmata'
 import { capitalize } from '../../lib/string'
+import SecondaryLabel from '../atoms/SecondaryLabel'
 
 export interface StigmataSetProps {
   type: 'set'
@@ -63,22 +64,18 @@ const StigmataSetPage = ({
           {stigmataSetList.map((stigmataSetItem) => {
             return (
               <React.Fragment key={stigmataSetItem.id}>
-                <Heading as='h2' m={0} p={2} sx={{ borderBottom: 'default' }}>
+                <Box sx={{ p: 2, borderBottom: 'default' }}>
-                  <PageLink href={`/honkai3rd/stigmata/${stigmataSetItem.id}`}>
+                  <Heading as='h2' mb={1}>
-                    {stigmataSetItem.name}
+                    <PageLink
-                  </PageLink>
+                      href={`/honkai3rd/stigmata/${stigmataSetItem.id}`}
-
+                    >
-                  <br />
+                      {stigmataSetItem.name}
-                  <Text
+                    </PageLink>
-                    as='small'
+                  </Heading>
-                    sx={{
+                  <SecondaryLabel>
-                      fontSize: 2,
-                      color: 'secondary',
-                    }}
-                  >
                     {capitalize(stigmataSetItem.type)}
-                  </Text>
+                  </SecondaryLabel>
-                </Heading>
+                </Box>
                 <Box p={2} sx={{ borderBottom: 'default' }}>
                   HP : {stigmataSetItem.hp} / ATK : {stigmataSetItem.atk} / DEF
                   : {stigmataSetItem.def} / CRT : {stigmataSetItem.crt}

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

@@ -6,6 +6,7 @@ import React from 'react'
 import BattlesuitFeatureLabel from '../../../components/atoms/BattlesuitFeatureLabel'
 import BattlesuitRankIcon from '../../../components/atoms/BattlesuitRankIcon'
 import PageLink from '../../../components/atoms/PageLink'
+import SecondaryLabel from '../../../components/atoms/SecondaryLabel'
 import TypeLabel from '../../../components/atoms/TypeLabel'
 import ValkyrieLabel from '../../../components/atoms/ValkyrieLabel'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
@@ -179,18 +180,17 @@ const BattlesuitSkillGroupCard = ({
 }: BattlesuitSkillGroupCardProps) => {
   return (
     <Card mb={3}>
-      <Heading
+      <Box
-        as='h2'
+        sx={{
-        p={2}
+          p: 2,
-        m={0}
+          borderBottom: 'default',
-        sx={{ borderBottom: 'default', fontSize: 4 }}
+        }}
       >
-        {skillGroup.core.name}
+        <Heading as='h2' mb={1}>
-        <br />
+          {skillGroup.core.name}
-        <Text as='small' sx={{ fontSize: 2, color: 'secondary' }}>
+        </Heading>
-          {heading}
+        <SecondaryLabel>{heading}</SecondaryLabel>
-        </Text>
+      </Box>
-      </Heading>
 
       <Paragraph p={2} sx={{ whiteSpace: 'pre-wrap', borderBottom: 'default' }}>
         {skillGroup.core.description}

src/pages/honkai3rd/elfs/[elfId].tsx

@@ -1,9 +1,10 @@
 /** @jsxImportSource theme-ui */
-import { Box, Card, Flex, Heading, Paragraph, Text } from '@theme-ui/components'
+import { Box, Card, Flex, Heading, Paragraph } from '@theme-ui/components'
 import { NextPageContext } from 'next'
 import Image from 'next/image'
 import React from 'react'
 import BattlesuitFeatureLabel from '../../../components/atoms/BattlesuitFeatureLabel'
+import SecondaryLabel from '../../../components/atoms/SecondaryLabel'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
 import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
 import { ElfData } from '../../../lib/honkai3rd/elfs'
@@ -78,17 +79,7 @@ const ElfShowPage = ({ elf }: ElfShowPageProps) => {
                       >
                         {item.name}
                       </Heading>
-                      <Text
+                      <SecondaryLabel>{capitalize(item.type)}</SecondaryLabel>
-                        as='small'
-                        sx={{
-                          fontSize: 2,
-                          color: 'secondary',
-                          fontWeight: 'heading',
-                          fontFamily: 'monospace',
-                        }}
-                      >
-                        {capitalize(item.type)}
-                      </Text>
                     </Box>
                     <Paragraph
                       sx={{