159 lines
4.6 KiB
TypeScript
159 lines
4.6 KiB
TypeScript
/** @jsxImportSource theme-ui */
|
|
import { StigmataData, StigmataSet } from '../../lib/honkai3rd/stigmata'
|
|
import {
|
|
Box,
|
|
Heading,
|
|
Paragraph,
|
|
Card,
|
|
Flex,
|
|
Image,
|
|
} from '@theme-ui/components'
|
|
import PageLink from '../../components/atoms/PageLink'
|
|
import StigmataCard from '../../components/molecules/StigmataCard'
|
|
import Breadcrumb from '../../components/organisms/Breadcrumb'
|
|
import SecondaryLabel from '../atoms/SecondaryLabel'
|
|
import { useTranslation } from '../../lib/i18n'
|
|
import Head from '../atoms/Head'
|
|
import { assetsBucketBaseUrl } from '../../lib/consts'
|
|
import Honkai3rdLayout from '../layouts/Honkai3rdLayout'
|
|
|
|
export interface SingleStigmataPageProps {
|
|
type: 'single'
|
|
stigmataData: StigmataData
|
|
stigmataSetList: StigmataData[]
|
|
stigmataSet?: StigmataSet
|
|
}
|
|
|
|
const SingleStigmataPage = ({
|
|
stigmataData,
|
|
stigmataSet,
|
|
stigmataSetList,
|
|
}: SingleStigmataPageProps) => {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<Honkai3rdLayout>
|
|
<Head
|
|
title={`${stigmataData.name} - ${t('common.honkai-3rd')} - ${t(
|
|
'common.abyss-lab'
|
|
)}`}
|
|
description={`${t('common.honkai-3rd')} ${t('stigmata-show.stigmata')} /
|
|
${'⭐'.repeat(stigmataData.rarity)} / ${t(
|
|
`stigmata-show.${stigmataData.type}`
|
|
)} / HP : ${stigmataData.hp} / ATK : ${stigmataData.atk} / DEF : ${
|
|
stigmataData.def
|
|
} / CRT : ${stigmataData.crt}`}
|
|
/>
|
|
<Box p={3}>
|
|
<Breadcrumb
|
|
items={[
|
|
{ href: '/honkai3rd', label: t('common.honkai-3rd') },
|
|
{ href: '/honkai3rd/stigmata', label: t('common.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: [300, 400],
|
|
borderRadius: 4,
|
|
}}
|
|
>
|
|
<Image
|
|
alt={stigmataData.name}
|
|
src={`${assetsBucketBaseUrl}/honkai3rd/stigmata/${stigmataData.id}.png`}
|
|
width={400}
|
|
height={400}
|
|
/>
|
|
</Box>
|
|
|
|
<Card mb={3}>
|
|
<Box p={2} sx={{ borderBottom: 'default' }}>
|
|
{t(`stigmata-show.${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}
|
|
sx={{
|
|
whiteSpace: 'pre-wrap',
|
|
}}
|
|
>
|
|
{stigmataData.skill.description}
|
|
</Paragraph>
|
|
</Card>
|
|
|
|
{stigmataSet != null && (
|
|
<Card>
|
|
<Box sx={{ p: 2, borderBottom: 'default' }}>
|
|
<Heading as='h2' mb={1}>
|
|
<PageLink href={`/honkai3rd/stigmata/${stigmataSet.id}-set`}>
|
|
{stigmataSet.name}
|
|
</PageLink>
|
|
</Heading>
|
|
<SecondaryLabel>{stigmataSet.altName}</SecondaryLabel>
|
|
</Box>
|
|
|
|
<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', whiteSpace: 'pre-wrap' }}
|
|
>
|
|
{stigmataSet.twoSetSkill.description}
|
|
</Paragraph>
|
|
<Heading as='h3' m={0} p={2} sx={{ borderBottom: 'default' }}>
|
|
{stigmataSet.threeSetSkill.name}
|
|
</Heading>
|
|
<Paragraph
|
|
m={0}
|
|
p={2}
|
|
sx={{
|
|
whiteSpace: 'pre-wrap',
|
|
}}
|
|
>
|
|
{stigmataSet.threeSetSkill.description}
|
|
</Paragraph>
|
|
</Card>
|
|
)}
|
|
</Box>
|
|
</Honkai3rdLayout>
|
|
)
|
|
}
|
|
|
|
export default SingleStigmataPage
|