From 128deaa9d301fa1baf4aefd1217976b77df3d0dc Mon Sep 17 00:00:00 2001
From: Sakura Knoll <s4kura.knoll@gmail.com>
Date: Sun, 2 Jan 2022 16:58:20 +0900
Subject: [PATCH] Extract page compoentns from stigmata show page

---
 src/components/pages/SingleStigmataPage.tsx   | 121 ++++++++++
 src/components/pages/StigmataSetPage.tsx      | 107 +++++++++
 src/pages/honkai3rd/stigmata/[stigmataId].tsx | 219 +-----------------
 3 files changed, 237 insertions(+), 210 deletions(-)
 create mode 100644 src/components/pages/SingleStigmataPage.tsx
 create mode 100644 src/components/pages/StigmataSetPage.tsx

diff --git a/src/components/pages/SingleStigmataPage.tsx b/src/components/pages/SingleStigmataPage.tsx
new file mode 100644
index 00000000..39588c3c
--- /dev/null
+++ b/src/components/pages/SingleStigmataPage.tsx
@@ -0,0 +1,121 @@
+/** @jsxImportSource theme-ui */
+import { StigmataData, StigmataSet } from '../../lib/honkai3rd/stigmata'
+import Image from 'next/image'
+import { Box, Heading, Text, Paragraph, Card, Flex } from '@theme-ui/components'
+import PageLink from '../../components/atoms/PageLink'
+import StigmataCard from '../../components/molecules/StigmataCard'
+import Breadcrumb from '../../components/organisms/Breadcrumb'
+import Honkai3rdNavigator from '../../components/organisms/Honkai3rdNavigator'
+import { capitalize } from '../../lib/string'
+
+export interface SingleStigmataPageProps {
+  type: 'single'
+  stigmataData: StigmataData
+  stigmataSetList: StigmataData[]
+  stigmataSet?: StigmataSet
+}
+
+const SingleStigmataPage = ({
+  stigmataData,
+  stigmataSet,
+  stigmataSetList,
+}: SingleStigmataPageProps) => {
+  return (
+    <Box>
+      <Honkai3rdNavigator />
+      <Box p={3}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: 'Honkai 3rd' },
+            { href: '/honkai3rd/stigmata', label: 'Stigmata' },
+            {
+              href: `/honkai3rd/stigmata/${stigmataData.id}`,
+              label: stigmataData.name,
+            },
+          ]}
+        />
+
+        <Heading as='h1'>{stigmataData.name}</Heading>
+
+        <Box
+          mb={3}
+          sx={{
+            position: 'relative',
+            overflow: 'hidden',
+            width: '100%',
+            maxWidth: '600px',
+            borderRadius: 4,
+          }}
+        >
+          <Image
+            alt={stigmataData.name}
+            src={`/assets/honkai3rd/stigmata/${stigmataData.id}.png`}
+            width={600}
+            height={600}
+            layout='responsive'
+          />
+        </Box>
+
+        <Card mb={3}>
+          <Box p={2} sx={{ borderBottom: 'default' }}>
+            {capitalize(stigmataData.type)}
+          </Box>
+          <Box p={2} sx={{ borderBottom: 'default' }}>
+            {'⭐'.repeat(stigmataData.rarity)}
+          </Box>
+          <Box p={2} sx={{ borderBottom: 'default' }}>
+            HP : {stigmataData.hp} / ATK : {stigmataData.atk} / DEF :{' '}
+            {stigmataData.def} / CRT : {stigmataData.crt}
+          </Box>
+          <Paragraph p={2}>{stigmataData.skill.description}</Paragraph>
+        </Card>
+
+        {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
+              </Text>
+            </Heading>
+            <Flex
+              p={2}
+              sx={{
+                borderBottom: 'default',
+                justifyContent: 'space-around',
+                flexWrap: 'wrap',
+              }}
+            >
+              {stigmataSetList.map((stigmataSetItem) => {
+                return (
+                  <StigmataCard
+                    key={stigmataSetItem.id}
+                    stigmata={stigmataSetItem}
+                  />
+                )
+              })}
+            </Flex>
+
+            <Heading as='h3' 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='h3' 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 SingleStigmataPage
diff --git a/src/components/pages/StigmataSetPage.tsx b/src/components/pages/StigmataSetPage.tsx
new file mode 100644
index 00000000..c848b18c
--- /dev/null
+++ b/src/components/pages/StigmataSetPage.tsx
@@ -0,0 +1,107 @@
+/** @jsxImportSource theme-ui */
+import { Box, Heading, Text, Paragraph, Card, Flex } from '@theme-ui/components'
+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'
+import { StigmataData, StigmataSet } from '../../lib/honkai3rd/stigmata'
+import { capitalize } from '../../lib/string'
+
+export interface StigmataSetProps {
+  type: 'set'
+  stigmataSet: StigmataSet
+  stigmataSetList: StigmataData[]
+}
+
+const StigmataSetPage = ({
+  stigmataSet,
+  stigmataSetList,
+}: StigmataSetProps) => {
+  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} Set`,
+            },
+          ]}
+        />
+
+        <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 StigmataSetPage
diff --git a/src/pages/honkai3rd/stigmata/[stigmataId].tsx b/src/pages/honkai3rd/stigmata/[stigmataId].tsx
index d8ca2572..658ffc41 100644
--- a/src/pages/honkai3rd/stigmata/[stigmataId].tsx
+++ b/src/pages/honkai3rd/stigmata/[stigmataId].tsx
@@ -1,13 +1,11 @@
-import { Box, Heading, Text, Paragraph, Card, Flex } from '@theme-ui/components'
+/** @jsxImportSource theme-ui */
 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'
-import { StigmataData, StigmataSet } from '../../../lib/honkai3rd/stigmata'
-import { capitalize } from '../../../lib/string'
+import SingleStigmataPage, {
+  SingleStigmataPageProps,
+} from '../../../components/pages/SingleStigmataPage'
+import StigmataSetPage, {
+  StigmataSetProps,
+} from '../../../components/pages/StigmataSetPage'
 import {
   listStigmata,
   getStigmataById,
@@ -16,213 +14,14 @@ import {
   listStigmataSet,
 } from '../../../server/data/honkai3rd/stigmata'
 
-interface SingleStigmataPageProps {
-  type: 'single'
-  stigmataData: StigmataData
-  stigmataSetList: StigmataData[]
-  stigmataSet?: StigmataSet
-}
-
-interface StigmataSetProps {
-  type: 'set'
-  stigmataSet: StigmataSet
-  stigmataSetList: StigmataData[]
-}
-
 type StigmataShowPageProps = SingleStigmataPageProps | StigmataSetProps
 
 const StigmataListPage = (props: StigmataShowPageProps) => {
   if (props.type === 'single') {
-    const { stigmataData, stigmataSet, stigmataSetList } = props
-
-    return (
-      <Box>
-        <Honkai3rdNavigator />
-        <Box p={3}>
-          <Breadcrumb
-            items={[
-              { href: '/honkai3rd', label: 'Honkai 3rd' },
-              { href: '/honkai3rd/stigmata', label: 'Stigmata' },
-              {
-                href: `/honkai3rd/stigmata/${stigmataData.id}`,
-                label: stigmataData.name,
-              },
-            ]}
-          />
-
-          <Heading as='h1'>{stigmataData.name}</Heading>
-
-          <Box
-            mb={3}
-            sx={{
-              position: 'relative',
-              overflow: 'hidden',
-              width: '100%',
-              maxWidth: '600px',
-              borderRadius: 4,
-            }}
-          >
-            <Image
-              alt={stigmataData.name}
-              src={`/assets/honkai3rd/stigmata/${stigmataData.id}.png`}
-              width={600}
-              height={600}
-              layout='responsive'
-            />
-          </Box>
-
-          <Card mb={3}>
-            <Box p={2} sx={{ borderBottom: 'default' }}>
-              {capitalize(stigmataData.type)}
-            </Box>
-            <Box p={2} sx={{ borderBottom: 'default' }}>
-              {'⭐'.repeat(stigmataData.rarity)}
-            </Box>
-            <Box p={2}>
-              HP : {stigmataData.hp} / ATK : {stigmataData.atk} / DEF :{' '}
-              {stigmataData.def} / CRT : {stigmataData.crt}
-            </Box>
-          </Card>
-
-          <Card mb={3}>
-            <Heading as='h2' m={0} p={2} sx={{ borderBottom: 'default' }}>
-              Skill - {stigmataData.skill.name}
-            </Heading>
-            <Paragraph p={2}>{stigmataData.skill.description}</Paragraph>
-          </Card>
-
-          {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
-                </Text>
-              </Heading>
-              <Flex
-                p={2}
-                sx={{
-                  borderBottom: 'default',
-                  justifyContent: 'space-around',
-                  flexWrap: 'wrap',
-                }}
-              >
-                {stigmataSetList.map((stigmataSetItem) => {
-                  return (
-                    <StigmataCard
-                      key={stigmataSetItem.id}
-                      stigmata={stigmataSetItem}
-                    />
-                  )
-                })}
-              </Flex>
-
-              <Heading as='h3' 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='h3' m={0} p={2} sx={{ borderBottom: 'default' }}>
-                {stigmataSet.threeSetSkill.name}
-              </Heading>
-              <Paragraph m={0} p={2}>
-                {stigmataSet.threeSetSkill.description}
-              </Paragraph>
-            </Card>
-          )}
-        </Box>
-      </Box>
-    )
+    return <SingleStigmataPage {...props} />
   }
-  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>
-  )
+  return <StigmataSetPage {...props} />
 }
 
 export default StigmataListPage