Refactor weapon list page

src/pages/honkai3rd/weapons/index.tsx

@@ -1,6 +1,5 @@
 /** @jsxImportSource theme-ui */
-import { Text, Box, Heading, Flex, Link } from '@theme-ui/components'
+import { Text, Box, Heading, Flex, Card } from '@theme-ui/components'
-import NextLink from 'next/link'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
 import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
 import { listWeapons } from '../../../server/data/honkai3rd/weapons'
@@ -10,6 +9,7 @@ import { useMemo } from 'react'
 import FilterButton from '../../../components/atoms/FilterButton'
 import { useRouter } from 'next/router'
 import { WeaponData } from '../../../lib/honkai3rd/weapons'
+import PageLink from '../../../components/atoms/PageLink'
 
 type WeaponListItemData = Pick<
   WeaponData,
@@ -48,33 +48,19 @@ const WeaponListPage = ({ weaponDataList }: WeaponListPageProps) => {
     return weaponDataList.map((weapon) => {
       const hidden = isWeaponHidden(weapon, filter)
       return (
-        <Box
+        <Card
           key={weapon.id}
           className={hidden ? 'hidden' : ''}
           sx={{
             width: '120px',
             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
+          <PageLink href={`/honkai3rd/weapons/${weapon.id}`}>
-            href={`/honkai3rd/weapons/${weapon.id}`}
-            key={weapon.id}
-            passHref={true}
-          >
-            <Link>
             <SquareImageBox
               size={100}
               alt={weapon.name}
@@ -94,9 +80,8 @@ const WeaponListPage = ({ weaponDataList }: WeaponListPageProps) => {
             <Box sx={{ fontSize: 1, textAlign: 'center' }}>
               {'⭐'.repeat(weapon.rarity)}
             </Box>
-            </Link>
+          </PageLink>
-          </NextLink>
+        </Card>
-        </Box>
       )
     })
   }, [weaponDataList, filter])