/** @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[] stigmataSetList: Pick[] } 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 ( {t('stigmata-list.stigmata')} {t('stigmata-list.set-list')} {listMode === 'set' ? stigmataSetList.map((stigmataSet) => { return ( ) }) : stigmataDataList.map((stigmata) => { return })} ) } 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)), }, } }