Extract page compoentns from stigmata show page

2022-01-02 16:58:20 +09:00
parent dbf1eaba33
commit 128deaa9d3
3 changed files with 237 additions and 210 deletions
@@ -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