Add stigmata set ui

src/pages/honkai3rd/stigmata/[stigmataId].tsx

@@ -2,6 +2,7 @@ import { Box, Heading, Text, Paragraph, Card, Flex } from '@theme-ui/components'
 import { NextPageContext } from 'next'
 import Image from 'next/image'
 import React from 'react'
+import PageLink from '../../../components/atoms/PageLink'
 import StigmataCard from '../../../components/molecules/StigmataCard'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
 import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
@@ -12,19 +13,28 @@ import {
   getStigmataById,
   getStigmataListBySetId,
   getStigmataSetBySetId,
+  listStigmataSet,
 } from '../../../server/data/honkai3rd/stigmata'
 
-interface StigmataShowPageProps {
+interface SingleStigmataPageProps {
+  type: 'single'
   stigmataData: StigmataData
   stigmataSetList: StigmataData[]
   stigmataSet?: StigmataSet
 }
 
-const StigmataListPage = ({
+interface StigmataSetProps {
-  stigmataData,
+  type: 'set'
-  stigmataSetList = [],
+  stigmataSet: StigmataSet
-  stigmataSet,
+  stigmataSetList: StigmataData[]
-}: StigmataShowPageProps) => {
+}
+
+type StigmataShowPageProps = SingleStigmataPageProps | StigmataSetProps
+
+const StigmataListPage = (props: StigmataShowPageProps) => {
+  if (props.type === 'single') {
+    const { stigmataData, stigmataSet, stigmataSetList } = props
+
     return (
       <Box>
         <Honkai3rdNavigator />
@@ -84,7 +94,9 @@ const StigmataListPage = ({
           {stigmataSet != null && (
             <Card>
               <Heading as='h2' m={0} p={2} sx={{ borderBottom: 'default' }}>
+                <PageLink href={`/honkai3rd/stigmata/${stigmataSet.id}-set`}>
                   {stigmataSet.name}
+                </PageLink>
                 <br />
                 <Text as='small' sx={{ fontSize: 2, color: 'secondary' }}>
                   Set
@@ -125,6 +137,92 @@ const StigmataListPage = ({
         </Box>
       </Box>
     )
+  }
+  const { stigmataSet, stigmataSetList } = props
+
+  return (
+    <Box>
+      <Honkai3rdNavigator />
+
+      <Box p={3}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: 'Honkai 3rd' },
+            { href: '/honkai3rd/stigmata', label: 'Stigmata' },
+            {
+              href: `/honkai3rd/stigmata/${stigmataSet.id}-set`,
+              label: stigmataSet.name,
+            },
+          ]}
+        />
+
+        <Heading as='h1'>{stigmataSet.name} Set</Heading>
+
+        <Card mb={3}>
+          <Flex
+            p={2}
+            sx={{
+              borderBottom: 'default',
+              justifyContent: 'space-around',
+              flexWrap: 'wrap',
+            }}
+          >
+            {stigmataSetList.map((stigmataSetItem) => {
+              return (
+                <StigmataCard
+                  key={stigmataSetItem.id}
+                  stigmata={stigmataSetItem}
+                />
+              )
+            })}
+          </Flex>
+          {stigmataSetList.map((stigmataSetItem) => {
+            return (
+              <React.Fragment key={stigmataSetItem.id}>
+                <Heading as='h2' m={0} p={2} sx={{ borderBottom: 'default' }}>
+                  <PageLink href={`/honkai3rd/stigmata/${stigmataSetItem.id}`}>
+                    {stigmataSetItem.name}
+                  </PageLink>
+
+                  <br />
+                  <Text
+                    as='small'
+                    sx={{
+                      fontSize: 2,
+                      color: 'secondary',
+                    }}
+                  >
+                    {capitalize(stigmataSetItem.type)}
+                  </Text>
+                </Heading>
+                <Box p={2} sx={{ borderBottom: 'default' }}>
+                  HP : {stigmataSetItem.hp} / ATK : {stigmataSetItem.atk} / DEF
+                  : {stigmataSetItem.def} / CRT : {stigmataSetItem.crt}
+                </Box>
+                <Paragraph m={0} p={2} sx={{ borderBottom: 'default' }}>
+                  {stigmataSetItem.skill.description}
+                </Paragraph>
+              </React.Fragment>
+            )
+          })}
+        </Card>
+        <Card>
+          <Heading as='h2' m={0} p={2} sx={{ borderBottom: 'default' }}>
+            {stigmataSet.twoSetSkill.name}
+          </Heading>
+          <Paragraph m={0} p={2} sx={{ borderBottom: 'default' }}>
+            {stigmataSet.twoSetSkill.description}
+          </Paragraph>
+          <Heading as='h2' m={0} p={2} sx={{ borderBottom: 'default' }}>
+            {stigmataSet.threeSetSkill.name}
+          </Heading>
+          <Paragraph m={0} p={2}>
+            {stigmataSet.threeSetSkill.description}
+          </Paragraph>
+        </Card>
+      </Box>
+    </Box>
+  )
 }
 
 export default StigmataListPage
@@ -133,9 +231,10 @@ export async function getStaticProps(
   ctx: NextPageContext & { params: { stigmataId: string } }
 ) {
   const stigmataData = getStigmataById(ctx.params.stigmataId)!
-
+  if (stigmataData != null) {
     return {
       props: {
+        type: 'single',
         stigmataData: stigmataData,
         stigmataSetList: (getStigmataListBySetId(stigmataData.set!) || []).sort(
           (a, b) => -a.type.localeCompare(b.type)
@@ -143,15 +242,34 @@ export async function getStaticProps(
         stigmataSet: getStigmataSetBySetId(stigmataData.set!) || null,
       },
     }
+  }
+  const [stigmataSetId] = ctx.params.stigmataId.split('-set')
+  const stigmataSet = getStigmataSetBySetId(stigmataSetId)!
+  return {
+    props: {
+      type: 'set',
+      stigmataSet,
+      stigmataSetList: (getStigmataListBySetId(stigmataSet.id) || []).sort(
+        (a, b) => -a.type.localeCompare(b.type)
+      ),
+    },
+  }
 }
 
 export async function getStaticPaths() {
   return {
-    paths: listStigmata().map((stigmata) => {
+    paths: [
+      ...listStigmata().map((stigmata) => {
         return {
           params: { stigmataId: stigmata.id },
         }
       }),
+      ...listStigmataSet().map((stigmataSet) => {
+        return {
+          params: { stigmataId: `${stigmataSet.id}-set` },
+        }
+      }),
+    ],
     fallback: false,
   }
 }

src/server/data/honkai3rd/stigmata.ts

@@ -72,6 +72,10 @@ export function getStigmataById(id: string) {
   return stigmataMap.get(id)
 }
 
+export function listStigmataSet() {
+  return stigmataSetList
+}
+
 export function getStigmataListBySetId(setId: string) {
   return stigmataSetStigmataDataListMap.get(setId) || []
 }