64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
/** @jsxImportSource theme-ui */
|
|
import { Box, Heading, Flex } from '@theme-ui/components'
|
|
import { NextPageContext } from 'next'
|
|
import { pick } from 'ramda'
|
|
import ElfCard from '../../../components/molecules/ElfCard'
|
|
import Breadcrumb from '../../../components/organisms/Breadcrumb'
|
|
import { ElfData } from '../../../lib/honkai3rd/elfs'
|
|
import { getI18NProps } from '../../../server/i18n'
|
|
import { listElfs } from '../../../server/data/honkai3rd/elfs'
|
|
import { useTranslation } from '../../../lib/i18n'
|
|
import Head from '../../../components/atoms/Head'
|
|
import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
|
|
|
|
interface ElfListPageProps {
|
|
elfs: Pick<ElfData, 'id' | 'name' | 'krName'>[]
|
|
}
|
|
|
|
const ElfListPage = ({ elfs }: ElfListPageProps) => {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<Honkai3rdLayout>
|
|
<Head
|
|
title={`${t('common.elfs')} - ${t('common.honkai-3rd')} - ${t(
|
|
'common.abyss-lab'
|
|
)}`}
|
|
description={t('elfs-list.description')}
|
|
/>
|
|
<Box p={3}>
|
|
<Breadcrumb
|
|
items={[
|
|
{ href: '/honkai3rd', label: t('common.honkai-3rd') },
|
|
{ href: '/honkai3rd/elfs', label: t('common.elfs') },
|
|
]}
|
|
/>
|
|
|
|
<Heading as='h1'>{t('elfs-list.elfs')}</Heading>
|
|
|
|
<Flex
|
|
sx={{
|
|
flexWrap: 'wrap',
|
|
justifyContent: 'space-around',
|
|
}}
|
|
>
|
|
{elfs.map((elf) => {
|
|
return <ElfCard key={elf.id} elf={elf} />
|
|
})}
|
|
</Flex>
|
|
</Box>
|
|
</Honkai3rdLayout>
|
|
)
|
|
}
|
|
|
|
export default ElfListPage
|
|
|
|
export async function getStaticProps({ locale }: NextPageContext) {
|
|
return {
|
|
props: {
|
|
elfs: listElfs().map((elf) => pick(['id', 'name', 'krName'], elf)),
|
|
...(await getI18NProps(locale)),
|
|
},
|
|
}
|
|
}
|