Refactor components of battlesuit list page

src/components/atoms/PageLink.tsx

@@ -0,0 +1,15 @@
+/** @jsxImportSource theme-ui */
+import NextLink, { LinkProps as NextLinkProps } from 'next/link'
+import { Link, LinkProps } from '@theme-ui/components'
+
+type PageLinkProps = LinkProps & NextLinkProps
+
+const PageLink = ({ href, ...otherProps }: PageLinkProps) => {
+  return (
+    <NextLink href={href} passHref={true}>
+      <Link {...otherProps} />
+    </NextLink>
+  )
+}
+
+export default PageLink

src/components/atoms/SquareImageBox.tsx

@@ -3,7 +3,7 @@ import { Box } from '@theme-ui/components'
 import Image from 'next/image'
 
 interface SquareImageBoxProps {
-  size: number | string
+  size: number | string | Array<number | string>
   src: string
   alt?: string
   m?: number | string

src/components/molecules/BattlesuitCard.tsx

@@ -0,0 +1,49 @@
+import { Box, Card, Text } from '@theme-ui/components'
+import { BattlesuitData } from '../../server/data/honkai3rd/battlesuits'
+import PageLink from '../atoms/PageLink'
+import SquareImageBox from '../atoms/SquareImageBox'
+
+interface BattlesuitCardProps {
+  battlesuit: Pick<BattlesuitData, 'id' | 'name'>
+  hidden?: boolean
+}
+
+const BattlesuitCard = ({ battlesuit, hidden }: BattlesuitCardProps) => {
+  return (
+    <Card
+      className={hidden ? 'hidden' : ''}
+      sx={{
+        width: [140, 160],
+        padding: 2,
+        margin: 2,
+        '&.hidden': {
+          display: 'none',
+        },
+      }}
+    >
+      <PageLink
+        href={`/honkai3rd/battlesuits/${battlesuit.id}`}
+        key={battlesuit.id}
+      >
+        <SquareImageBox
+          alt={battlesuit.name}
+          src={`/assets/honkai3rd/battlesuits/portrait-${battlesuit.id}.png`}
+          size={[120, 140]}
+        />
+        <Box
+          sx={{
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            width: '100%',
+            whiteSpace: 'nowrap',
+            textAlign: 'center',
+          }}
+        >
+          <Text>{battlesuit.name}</Text>
+        </Box>
+      </PageLink>
+    </Card>
+  )
+}
+
+export default BattlesuitCard