108 lines
3.4 KiB
TypeScript
108 lines
3.4 KiB
TypeScript
/** @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
|