91 lines
2.9 KiB
TypeScript
91 lines
2.9 KiB
TypeScript
/** @jsxImportSource theme-ui */
|
|
import { Box, Card, Heading } from '@theme-ui/components'
|
|
import { NextPageContext } from 'next'
|
|
import { Flex } from 'theme-ui'
|
|
import { StigmataCatalogItem } from '../../../lib/v2/data/types'
|
|
import { loadStigmataCatalog } from '../../../lib/v2/server/loadData'
|
|
import StigmaIcon from '../../../components/v2/StigmaIcon'
|
|
import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
|
|
import { getI18NProps } from '../../../server/i18n'
|
|
import { useTranslation } from 'next-i18next'
|
|
import Breadcrumb from '../../../components/organisms/Breadcrumb'
|
|
import PageLink from '../../../components/atoms/PageLink'
|
|
|
|
interface StigmataListPageProps {
|
|
stigmataCatalog: StigmataCatalogItem[]
|
|
}
|
|
|
|
const StigmataListPage = ({ stigmataCatalog }: StigmataListPageProps) => {
|
|
const { t } = useTranslation()
|
|
return (
|
|
<Honkai3rdLayout>
|
|
<Box p={2}>
|
|
<Breadcrumb
|
|
items={[
|
|
{ href: '/honkai3rd', label: t('common.honkai-3rd') },
|
|
{ href: '/honkai3rd/stigmata', label: t('common.stigmata') }
|
|
]}
|
|
/>
|
|
<Heading as="h1">{t('stigmata-list.stigmata-single')}</Heading>
|
|
|
|
<Box mb={3}>
|
|
<PageLink href="/honkai3rd/stigmata-sets">{t('stigmata-list.show-set-list')}</PageLink>
|
|
</Box>
|
|
<Flex sx={{ flexWrap: 'wrap' }}>
|
|
{stigmataCatalog
|
|
.filter(filterStigmata)
|
|
.sort(sortStigmata)
|
|
.map(stigma => {
|
|
return (
|
|
<Box key={stigma.id} m={2}>
|
|
<PageLink href={`/honkai3rd/stigmata/${stigma.id}`}>
|
|
<Card p={1}>
|
|
<Flex sx={{ justifyContent: 'center' }}>
|
|
<StigmaIcon icon={stigma.icon} rarity={stigma.maxRarity} />
|
|
</Flex>
|
|
<Box
|
|
sx={{
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
px: 1,
|
|
width: 112,
|
|
textAlign: 'center'
|
|
}}
|
|
>
|
|
{stigma.name}
|
|
</Box>
|
|
{/* {stigma.id} */}
|
|
</Card>
|
|
</PageLink>
|
|
</Box>
|
|
)
|
|
})}
|
|
</Flex>
|
|
</Box>
|
|
</Honkai3rdLayout>
|
|
)
|
|
}
|
|
|
|
export default StigmataListPage
|
|
|
|
export async function getStaticProps({ locale }: NextPageContext) {
|
|
const stigmataCatalog = loadStigmataCatalog(locale)
|
|
|
|
return {
|
|
props: { stigmataCatalog, ...(await getI18NProps(locale)) }
|
|
}
|
|
}
|
|
|
|
function filterStigmata(weapon: StigmataCatalogItem) {
|
|
return true
|
|
}
|
|
|
|
function sortStigmata(a: StigmataCatalogItem, b: StigmataCatalogItem) {
|
|
let aId = parseInt(a.id)
|
|
|
|
let bId = parseInt(b.id)
|
|
|
|
return bId - aId
|
|
}
|