115 lines
3.4 KiB
TypeScript
115 lines
3.4 KiB
TypeScript
/** @jsxImportSource theme-ui */
|
|
import { Box, Heading, Flex } from '@theme-ui/components'
|
|
import { NextPageContext } from 'next'
|
|
import { useRouter } from 'next/router'
|
|
import { pick } from 'ramda'
|
|
import { useMemo } from 'react'
|
|
import PageLink from '../../../components/atoms/PageLink'
|
|
import StigmataCard from '../../../components/molecules/StigmataCard'
|
|
import StigmataSetCard from '../../../components/molecules/StigmataSetCard'
|
|
import Breadcrumb from '../../../components/organisms/Breadcrumb'
|
|
import { StigmataData, StigmataSet } from '../../../lib/honkai3rd/stigmata'
|
|
import { getI18NProps } from '../../../server/i18n'
|
|
import {
|
|
listStigmata,
|
|
listStigmataSet,
|
|
} from '../../../server/data/honkai3rd/stigmata'
|
|
import { useTranslation } from 'next-i18next'
|
|
import Head from '../../../components/atoms/Head'
|
|
import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
|
|
|
|
interface StigmataListPageProps {
|
|
stigmataDataList: Pick<StigmataData, 'id' | 'name' | 'rarity' | 'krName'>[]
|
|
stigmataSetList: Pick<StigmataSet, 'id' | 'name' | 'rarity' | 'krName'>[]
|
|
}
|
|
|
|
const StigmataListPage = ({
|
|
stigmataDataList,
|
|
stigmataSetList,
|
|
}: StigmataListPageProps) => {
|
|
const { t } = useTranslation()
|
|
const { query } = useRouter()
|
|
|
|
const listMode = useMemo(() => {
|
|
if (query.list == null) {
|
|
return 'single'
|
|
}
|
|
return typeof query.list === 'string' ? query.list : query.list[0]
|
|
}, [query])
|
|
|
|
return (
|
|
<Honkai3rdLayout>
|
|
<Head
|
|
title={`${t('breadcrumb.honkai-3rd')}: ${t(
|
|
'breadcrumb.stigmata'
|
|
)} - ${t('nav.abyss-lab')}`}
|
|
description={t('stigmata-list.description')}
|
|
/>
|
|
|
|
<Box p={3}>
|
|
<Breadcrumb
|
|
items={[
|
|
{ href: '/honkai3rd', label: t('breadcrumb.honkai-3rd') },
|
|
{ href: '/honkai3rd/stigmata', label: t('breadcrumb.stigmata') },
|
|
]}
|
|
/>
|
|
|
|
<Heading as='h1'>{t('stigmata-list.stigmata')}</Heading>
|
|
|
|
<Flex mb={3}>
|
|
<PageLink
|
|
href={{
|
|
query: listMode === 'set' ? { list: 'single' } : { list: 'set' },
|
|
}}
|
|
shallow={true}
|
|
m={1}
|
|
py={1}
|
|
px={2}
|
|
className={listMode === 'set' ? 'active' : ''}
|
|
sx={{ display: 'flex' }}
|
|
variant='buttons.primary'
|
|
>
|
|
{t('stigmata-list.set-list')}
|
|
</PageLink>
|
|
</Flex>
|
|
|
|
<Flex
|
|
sx={{
|
|
flexWrap: 'wrap',
|
|
justifyContent: 'space-around',
|
|
}}
|
|
>
|
|
{listMode === 'set'
|
|
? stigmataSetList.map((stigmataSet) => {
|
|
return (
|
|
<StigmataSetCard
|
|
key={stigmataSet.id}
|
|
stigmataSet={stigmataSet}
|
|
/>
|
|
)
|
|
})
|
|
: stigmataDataList.map((stigmata) => {
|
|
return <StigmataCard key={stigmata.id} stigmata={stigmata} />
|
|
})}
|
|
</Flex>
|
|
</Box>
|
|
</Honkai3rdLayout>
|
|
)
|
|
}
|
|
|
|
export default StigmataListPage
|
|
|
|
export async function getStaticProps({ locale }: NextPageContext) {
|
|
return {
|
|
props: {
|
|
stigmataDataList: listStigmata().map((stigmata) =>
|
|
pick(['id', 'name', 'rarity', 'krName'], stigmata)
|
|
),
|
|
stigmataSetList: listStigmataSet().map((stigmataSet) =>
|
|
pick(['id', 'name', 'rarity', 'krName'], stigmataSet)
|
|
),
|
|
...(await getI18NProps(locale)),
|
|
},
|
|
}
|
|
}
|