Add size prop to cards

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={{