retr0volkov/abyss-lab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extract page compoentns from stigmata show page

Browse Source
This commit is contained in:
Sakura Knoll
2022-01-02 16:58:20 +09:00 Unverified
parent dbf1eaba33
commit 128deaa9d3
3 changed files with 237 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/honkai3rd/stigmata/[stigmataId].tsx
+9 -210
View File
@@ -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