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

src/pages/_app.tsx

@@ -54,6 +54,7 @@ export const theme: Theme = {
   },
   borders: {
     default: `1px solid ${colors.gray[5]}`,
+    primary: `1px solid #007bff`,
   },
   lineHeights: {
     body: 1.6,
@@ -96,10 +97,19 @@ export const theme: Theme = {
       borderStyle: 'solid',
       borderWidth: 1,
       bg: 'background',
+      cursor: 'pointer',
       '&:hover, &.active': {
         color: 'background',
         bg: 'primary',
       },
+      transition:
+        'box-shadow 200ms ease-in-out, color 200ms ease-in-out, background-color 200ms ease-in-out',
+      '&:hover': {
+        boxShadow: 'rgba(0, 0, 0, 0.2) 0px 4px 8px;',
+      },
+      '&.hidden': {
+        display: 'none',
+      },
     },
     secondary: {
       color: 'background',
@@ -209,6 +219,16 @@ export const theme: Theme = {
     },
   },
   cards: {
+    primary: {
+      border: 'default',
+      borderRadius: 'default',
+
+      transition:
+        'box-shadow 200ms ease-in-out, color 200ms ease-in-out, background-color 200ms ease-in-out',
+      '&:hover': {
+        boxShadow: 'rgba(0, 0, 0, 0.2) 0px 4px 8px;',
+      },
+    },
     stigmata: {
       padding: 2,
       borderRadius: 4,

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

@@ -41,8 +41,12 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
         <Box
           sx={{
             borderRadius: 4,
-            border: 'default',
             overflow: 'hidden',
+            border: 'default',
+            transition: 'box-shadow 200ms ease-in-out',
+            '&:hover': {
+              boxShadow: 'rgba(0, 0, 0, 0.2) 0px 4px 8px;',
+            },
           }}
           mb={3}
         >
@@ -161,6 +165,10 @@ const BattlesuitSkillGroupCard = ({
       sx={{
         borderRadius: 4,
         border: 'default',
+        transition: 'box-shadow 200ms ease-in-out',
+        '&:hover': {
+          boxShadow: 'rgba(0, 0, 0, 0.2) 0px 4px 8px;',
+        },
       }}
     >
       <Heading

src/pages/honkai3rd/battlesuits/index.tsx

@@ -1,9 +1,7 @@
-import { Box, Heading, Flex, Text, Link } from '@theme-ui/components'
+import { Box, Heading, Flex } from '@theme-ui/components'
-import NextLink from 'next/link'
 import { pick } from 'ramda'
-import React, { useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import FilterButton from '../../../components/atoms/FilterButton'
-import SquareImageBox from '../../../components/atoms/SquareImageBox'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
 import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
 import {
@@ -11,6 +9,7 @@ import {
   listBattlesuits,
 } from '../../../server/data/honkai3rd/battlesuits'
 import { battlesuitStrengths } from '../../../lib/safeData'
+import BattlesuitCard from '../../../components/molecules/BattlesuitCard'
 
 type BattlesuitListItemData = Pick<
   BattlesuitData,
@@ -57,52 +56,11 @@ const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
     return battlesuits.map((battlesuit) => {
       const hidden = isBattlesuitHidden(battlesuit, filter)
       return (
-        <Box
+        <BattlesuitCard
           key={battlesuit.id}
-          className={hidden ? 'hidden' : ''}
+          battlesuit={battlesuit}
-          sx={{
+          hidden={hidden}
-            width: '160px',
-            padding: 2,
-            margin: 1,
-            borderColor: 'gray.3',
-            borderWidth: 1,
-            borderStyle: 'solid',
-            borderRadius: 8,
-            transition: 'box-shadow 200ms ease-in-out',
-            '&:hover': {
-              borderColor: 'gray.3',
-              boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
-            },
-            '&.hidden': {
-              display: 'none',
-            },
-          }}
-        >
-          <NextLink
-            href={`/honkai3rd/battlesuits/${battlesuit.id}`}
-            key={battlesuit.id}
-            passHref={true}
-          >
-            <Link>
-              <SquareImageBox
-                alt={battlesuit.name}
-                src={`/assets/honkai3rd/battlesuits/portrait-${battlesuit.id}.png`}
-                size={140}
         />
-              <Box
-                sx={{
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  width: '100%',
-                  whiteSpace: 'nowrap',
-                  textAlign: 'center',
-                }}
-              >
-                <Text>{battlesuit.name}</Text>
-              </Box>
-            </Link>
-          </NextLink>
-        </Box>
       )
     })
   }, [battlesuits, filter])
@@ -120,6 +78,7 @@ const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
         />
 
         <Heading as='h1'>Battlesuits</Heading>
+
         <Box>
           <Heading as='h3'>Filter by Features</Heading>
           <Flex mb={2} sx={{ flexWrap: 'wrap' }}>