Add stigmata set view

src/components/molecules/StigmataSetCard.tsx

@@ -0,0 +1,56 @@
+import { Box, Card, Flex, Text } from '@theme-ui/components'
+import { StigmataSet } from '../../lib/honkai3rd/stigmata'
+import PageLink from '../atoms/PageLink'
+import SquareImageBox from '../atoms/SquareImageBox'
+
+interface StigmataSetCardProps {
+  stigmataSet: Pick<StigmataSet, 'id' | 'name' | 'rarity'>
+}
+
+const StigmataSetCard = ({ stigmataSet }: StigmataSetCardProps) => {
+  return (
+    <Card
+      sx={{
+        width: ['280px', '340px'],
+        padding: 2,
+        margin: 2,
+      }}
+    >
+      <PageLink href={`/honkai3rd/stigmata/${stigmataSet.id}-set`}>
+        <Flex sx={{ justifyContent: 'space-around' }}>
+          <SquareImageBox
+            size={[80, 100]}
+            alt={`${stigmataSet.id} Top`}
+            src={`/assets/honkai3rd/stigmata/icon-${stigmataSet.id}-top.png`}
+          />
+          <SquareImageBox
+            size={[80, 100]}
+            alt={`${stigmataSet.id} Mid`}
+            src={`/assets/honkai3rd/stigmata/icon-${stigmataSet.id}-mid.png`}
+          />
+          <SquareImageBox
+            size={[80, 100]}
+            alt={`${stigmataSet.id} Bottom`}
+            src={`/assets/honkai3rd/stigmata/icon-${stigmataSet.id}-bot.png`}
+          />
+        </Flex>
+        <Box
+          sx={{
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            width: '100%',
+            whiteSpace: 'nowrap',
+            textAlign: 'center',
+          }}
+        >
+          <Text>{stigmataSet.name}</Text>
+        </Box>
+        <Box sx={{ fontSize: 1, textAlign: 'center' }}>
+          {'⭐'.repeat(stigmataSet.rarity)}
+        </Box>
+      </PageLink>
+    </Card>
+  )
+}
+
+export default StigmataSetCard

src/pages/honkai3rd/stigmata/index.tsx

@@ -1,17 +1,37 @@
 /** @jsxImportSource theme-ui */
 import { Box, Heading, Flex } from '@theme-ui/components'
+import { useRouter } from 'next/router'
 import { pick } from 'ramda'
+import { useMemo } from 'react'
+import PageLink from '../../../components/atoms/PageLink'
 import StigmataCard from '../../../components/molecules/StigmataCard'
+import StigmataSetCard from '../../../components/molecules/StigmataSetCard'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
 import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
-import { StigmataData } from '../../../lib/honkai3rd/stigmata'
+import { StigmataData, StigmataSet } from '../../../lib/honkai3rd/stigmata'
-import { listStigmata } from '../../../server/data/honkai3rd/stigmata'
+import {
+  listStigmata,
+  listStigmataSet,
+} from '../../../server/data/honkai3rd/stigmata'
 
 interface StigmataListPageProps {
   stigmataDataList: Pick<StigmataData, 'id' | 'name' | 'rarity'>[]
+  stigmataSetList: Pick<StigmataSet, 'id' | 'name' | 'rarity'>[]
 }
 
-const StigmataListPage = ({ stigmataDataList }: StigmataListPageProps) => {
+const StigmataListPage = ({
+  stigmataDataList,
+  stigmataSetList,
+}: StigmataListPageProps) => {
+  const { query } = useRouter()
+
+  const listMode = useMemo(() => {
+    if (query.list == null) {
+      return 'single'
+    }
+    return typeof query.list === 'string' ? query.list : query.list[0]
+  }, [query])
+
   return (
     <Box>
       <Honkai3rdNavigator />
@@ -26,15 +46,41 @@ const StigmataListPage = ({ stigmataDataList }: StigmataListPageProps) => {
 
         <Heading as='h1'>Stigmata</Heading>
 
+        <Flex mb={3}>
+          <PageLink
+            href={{
+              query: listMode === 'set' ? { list: 'single' } : { list: 'set' },
+            }}
+            shallow={true}
+            m={1}
+            py={1}
+            px={2}
+            className={listMode === 'set' ? 'active' : ''}
+            sx={{ display: 'flex' }}
+            variant='buttons.primary'
+          >
+            Set List
+          </PageLink>
+        </Flex>
+
         <Flex
           sx={{
             flexWrap: 'wrap',
             justifyContent: 'space-around',
           }}
         >
-          {stigmataDataList.map((stigmata) => {
+          {listMode === 'set'
-            return <StigmataCard key={stigmata.id} stigmata={stigmata} />
+            ? stigmataSetList.map((stigmataSet) => {
-          })}
+                return (
+                  <StigmataSetCard
+                    key={stigmataSet.id}
+                    stigmataSet={stigmataSet}
+                  />
+                )
+              })
+            : stigmataDataList.map((stigmata) => {
+                return <StigmataCard key={stigmata.id} stigmata={stigmata} />
+              })}
         </Flex>
       </Box>
     </Box>
@@ -49,6 +95,9 @@ export async function getStaticProps() {
       stigmataDataList: listStigmata().map((stigmata) =>
         pick(['id', 'name', 'rarity'], stigmata)
       ),
+      stigmataSetList: listStigmataSet().map((stigmataSet) =>
+        pick(['id', 'name', 'rarity'], stigmataSet)
+      ),
     },
   }
 }