Extract StigmataCard

src/components/molecules/StigmataCard.tsx

@@ -0,0 +1,44 @@
+import { Box, Card, Text } from '@theme-ui/components'
+import { StigmataData } from '../../lib/honkai3rd/stigmata'
+import PageLink from '../atoms/PageLink'
+import SquareImageBox from '../atoms/SquareImageBox'
+
+interface StigmataCardProps {
+  stigmata: Pick<StigmataData, 'id' | 'name' | 'rarity'>
+}
+
+const StigmataCard = ({ stigmata }: StigmataCardProps) => {
+  return (
+    <Card
+      sx={{
+        width: '120px',
+        padding: 2,
+        margin: 2,
+      }}
+    >
+      <PageLink href={`/honkai3rd/stigmata/${stigmata.id}`}>
+        <SquareImageBox
+          size={100}
+          alt={stigmata.name}
+          src={`/assets/honkai3rd/stigmata/icon-${stigmata.id}.png`}
+        />
+        <Box
+          sx={{
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            width: '100%',
+            whiteSpace: 'nowrap',
+            textAlign: 'center',
+          }}
+        >
+          <Text>{stigmata.name}</Text>
+        </Box>
+        <Box sx={{ fontSize: 1, textAlign: 'center' }}>
+          {'⭐'.repeat(stigmata.rarity)}
+        </Box>
+      </PageLink>
+    </Card>
+  )
+}
+
+export default StigmataCard

src/pages/honkai3rd/stigmata/index.tsx

@@ -1,8 +1,7 @@
 /** @jsxImportSource theme-ui */
-import { Text, Box, Heading, Flex, Link } from '@theme-ui/components'
+import { Box, Heading, Flex } from '@theme-ui/components'
-import Image from 'next/image'
-import NextLink from 'next/link'
 import { pick } from 'ramda'
+import StigmataCard from '../../../components/molecules/StigmataCard'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
 import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
 import { StigmataData } from '../../../lib/honkai3rd/stigmata'
@@ -34,64 +33,7 @@ const StigmataListPage = ({ stigmataDataList }: StigmataListPageProps) => {
           }}
         >
           {stigmataDataList.map((stigmata) => {
-            return (
+            return <StigmataCard key={stigmata.id} stigmata={stigmata} />
-              <Box
-                key={stigmata.id}
-                sx={{
-                  width: '120px',
-                  padding: 2,
-                  margin: 1,
-                  borderColor: 'gray.3',
-                  borderWidth: 1,
-                  borderStyle: 'solid',
-                  borderRadius: 8,
-                  '&:hover': {
-                    borderColor: 'gray.3',
-                    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
-                    transition: 'box-shadow 200ms ease-in-out',
-                  },
-                }}
-              >
-                <NextLink
-                  href={`/honkai3rd/stigmata/${stigmata.id}`}
-                  key={stigmata.id}
-                  passHref={true}
-                >
-                  <Link>
-                    <Box
-                      sx={{
-                        position: 'relative',
-                        overflow: 'hidden',
-                        width: '100px',
-                        height: '100px',
-                        borderRadius: 4,
-                      }}
-                    >
-                      <Image
-                        alt={stigmata.name}
-                        layout='fill'
-                        objectFit='cover'
-                        src={`/assets/honkai3rd/stigmata/icon-${stigmata.id}.png`}
-                      />
-                    </Box>
-                    <Box
-                      sx={{
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        width: '100%',
-                        whiteSpace: 'nowrap',
-                        textAlign: 'center',
-                      }}
-                    >
-                      <Text>{stigmata.name}</Text>
-                    </Box>
-                    <Box sx={{ fontSize: 1, textAlign: 'center' }}>
-                      {'⭐'.repeat(stigmata.rarity)}
-                    </Box>
-                  </Link>
-                </NextLink>
-              </Box>
-            )
           })}
         </Flex>
       </Box>