Add size prop to cards

src/components/molecules/BattlesuitCard.tsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource theme-ui */
-import { Box, Card, Text } from '@theme-ui/components'
+import { Box, Card, Text, Flex } from '@theme-ui/components'
 import { useRouter } from 'next/router'
 import { assetsBucketBaseUrl } from '../../lib/consts'
 import { BattlesuitData } from '../../lib/honkai3rd/battlesuits'
@@ -10,9 +10,10 @@ import SquareImageBox from '../atoms/SquareImageBox'
 interface BattlesuitCardProps {
   battlesuit: Pick<BattlesuitData, 'id' | 'name' | 'krName'>
   hidden?: boolean
+  size?: 'sm' | 'default'
 }
 
-const BattlesuitCard = ({ battlesuit, hidden }: BattlesuitCardProps) => {
+const BattlesuitCard = ({ battlesuit, hidden, size }: BattlesuitCardProps) => {
   const { locale } = useRouter()
 
   const battlesuitName = translate(
@@ -21,6 +22,44 @@ const BattlesuitCard = ({ battlesuit, hidden }: BattlesuitCardProps) => {
     battlesuit.name
   )
 
+  if (size === 'sm') {
+    return (
+      <Card
+        className={hidden ? 'hidden' : ''}
+        sx={{
+          width: 'fit-content',
+          p: 1,
+          m: 1,
+          '&.hidden': {
+            display: 'none',
+          },
+        }}
+      >
+        <PageLink href={`/honkai3rd/battlesuits/${battlesuit.id}`}>
+          <Flex>
+            <SquareImageBox
+              mr={2}
+              alt={battlesuitName}
+              src={`${assetsBucketBaseUrl}/honkai3rd/battlesuits/portrait-${battlesuit.id}.png`}
+              size={30}
+            />
+            <Box
+              sx={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                width: '100%',
+                whiteSpace: 'nowrap',
+                textAlign: 'center',
+              }}
+            >
+              <Text sx={{ lineHeight: '30px' }}>{battlesuitName}</Text>
+            </Box>
+          </Flex>
+        </PageLink>
+      </Card>
+    )
+  }
+
   return (
     <Card
       className={hidden ? 'hidden' : ''}

src/components/molecules/StigmataCard.tsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource theme-ui */
-import { Box, Card, Text } from '@theme-ui/components'
+import { Box, Card, Text, Flex } from '@theme-ui/components'
 import { useRouter } from 'next/router'
 import { assetsBucketBaseUrl } from '../../lib/consts'
 import { StigmataData } from '../../lib/honkai3rd/stigmata'
@@ -9,15 +9,54 @@ import SquareImageBox from '../atoms/SquareImageBox'
 
 interface StigmataCardProps {
   stigmata: Pick<StigmataData, 'id' | 'name' | 'rarity' | 'krName'>
+  size?: 'sm' | 'default'
 }
 
-const StigmataCard = ({ stigmata }: StigmataCardProps) => {
+const StigmataCard = ({ stigmata, size }: StigmataCardProps) => {
   const { locale } = useRouter()
   const stigmataName = translate(
     locale,
     { 'ko-KR': stigmata.krName },
     stigmata.name
   )
+
+  if (size === 'sm') {
+    return (
+      <Card
+        sx={{
+          width: 'fit-content',
+          p: 1,
+          margin: 1,
+          '&.hidden': {
+            display: 'none',
+          },
+        }}
+      >
+        <PageLink href={`/honkai3rd/stigmata/${stigmata.id}`}>
+          <Flex>
+            <SquareImageBox
+              mr={2}
+              alt={stigmataName}
+              src={`${assetsBucketBaseUrl}/honkai3rd/stigmata/icon-${stigmata.id}.png`}
+              size={30}
+            />
+            <Box
+              sx={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                width: '100%',
+                whiteSpace: 'nowrap',
+                textAlign: 'center',
+              }}
+            >
+              <Text sx={{ lineHeight: '30px' }}>{stigmataName}</Text>
+            </Box>
+          </Flex>
+        </PageLink>
+      </Card>
+    )
+  }
+
   return (
     <Card
       sx={{

src/components/molecules/WeaponCard.tsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource theme-ui */
-import { Box, Card, Text } from '@theme-ui/components'
+import { Box, Card, Text, Flex } from '@theme-ui/components'
 import { useRouter } from 'next/router'
 import { assetsBucketBaseUrl } from '../../lib/consts'
 import { WeaponData } from '../../lib/honkai3rd/weapons'
@@ -10,12 +10,51 @@ import SquareImageBox from '../atoms/SquareImageBox'
 interface WeaponCardProps {
   weapon: Pick<WeaponData, 'id' | 'name' | 'rarity' | 'krName'>
   hidden?: boolean
+  size?: 'sm' | 'default'
 }
 
-const WeaponCard = ({ weapon, hidden }: WeaponCardProps) => {
+const WeaponCard = ({ weapon, hidden, size = 'default' }: WeaponCardProps) => {
   const { locale } = useRouter()
   const weaponName = translate(locale, { 'ko-KR': weapon.krName }, weapon.name)
 
+  if (size === 'sm') {
+    return (
+      <Card
+        className={hidden ? 'hidden' : ''}
+        sx={{
+          width: 'fit-content',
+          p: 1,
+          m: 1,
+          '&.hidden': {
+            display: 'none',
+          },
+        }}
+      >
+        <PageLink href={`/honkai3rd/weapons/${weapon.id}`}>
+          <Flex>
+            <SquareImageBox
+              mr={2}
+              size={30}
+              alt={weaponName}
+              src={`${assetsBucketBaseUrl}/honkai3rd/weapons/${weapon.id}.png`}
+            />
+            <Box
+              sx={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                width: '100%',
+                whiteSpace: 'nowrap',
+                textAlign: 'center',
+              }}
+            >
+              <Text sx={{ lineHeight: '30px' }}>{weaponName}</Text>
+            </Box>
+          </Flex>
+        </PageLink>
+      </Card>
+    )
+  }
+
   return (
     <Card
       className={hidden ? 'hidden' : ''}