Improve version page

src/components/molecules/StigmataSetCard.tsx

@@ -7,9 +7,58 @@ import SquareImageBox from '../atoms/SquareImageBox'
 
 interface StigmataSetCardProps {
   stigmataSet: Pick<StigmataSet, 'id' | 'name' | 'rarity'>
+  size?: 'sm' | 'default'
 }
 
-const StigmataSetCard = ({ stigmataSet }: StigmataSetCardProps) => {
+const StigmataSetCard = ({
+  stigmataSet,
+  size = 'default',
+}: StigmataSetCardProps) => {
+  if (size === 'sm') {
+    return (
+      <Card
+        sx={{
+          width: 'fit-content',
+          p: 1,
+          m: 1,
+        }}
+      >
+        <PageLink href={`/honkai3rd/stigmata/${stigmataSet.id}-set`}>
+          <Flex>
+            <SquareImageBox
+              size={30}
+              alt={`${stigmataSet.name} Top`}
+              src={`${assetsBucketBaseUrl}/honkai3rd/stigmata/icon-${stigmataSet.id}-top.png`}
+              mr={1}
+            />
+            <SquareImageBox
+              size={30}
+              alt={`${stigmataSet.name} Mid`}
+              src={`${assetsBucketBaseUrl}/honkai3rd/stigmata/icon-${stigmataSet.id}-mid.png`}
+              mr={1}
+            />
+            <SquareImageBox
+              size={30}
+              alt={`${stigmataSet.name} Bottom`}
+              src={`${assetsBucketBaseUrl}/honkai3rd/stigmata/icon-${stigmataSet.id}-bot.png`}
+              mr={1}
+            />
+            <Box
+              sx={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                width: '100%',
+                whiteSpace: 'nowrap',
+                textAlign: 'center',
+              }}
+            >
+              <Text sx={{ lineHeight: '30px' }}>{stigmataSet.name}</Text>
+            </Box>
+          </Flex>
+        </PageLink>
+      </Card>
+    )
+  }
   return (
     <Card
       sx={{