/** @jsxImportSource theme-ui */ import { Box, Heading, Flex, Link, Card } from '@theme-ui/components' import { NextPageContext } from 'next' import { loadBattlesuitCatalog, loadErBattlesuitCatalog, loadErSigils, loadErSupports } from '../../../lib/v2/server/loadData' import { BattlesuitCatalogItem, ErBattlesuitCatalogItem } from '../../../lib/v2/data/types' import { useMemo } from 'react' import BattlesuitCatalogItemCard from '../../../components/v2/BattlesuitCatalogItemCard' import { assetsBucketBaseUrl } from '../../../lib/consts' import SquareImage from '../../../components/v2/SquareImage' import { signetGroups } from '../../../lib/v2/data/er' import BattlesuitSmallIcon from '../../../components/v2/BattlesuitSmallIcon' import MaterialIcon from '../../../components/v2/MaterialIcon' import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout' import Head from '../../../components/atoms/Head' import Breadcrumb from '../../../components/organisms/Breadcrumb' import { useTranslation } from 'next-i18next' import { getI18NProps } from '../../../server/i18n' interface ErPageProps { erBattlesuitCatalog: ErBattlesuitCatalogItem[] battlesuitCatalog: BattlesuitCatalogItem[] erSupports: string[] erSigils: { id: string; name: string }[] } const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }: ErPageProps) => { const { t } = useTranslation() const battlesuitCatalogMap = useMemo(() => { return battlesuitCatalog.reduce((map, item) => { map.set(item.id, item) return map }, new Map()) }, [battlesuitCatalog]) return ( Elysian Realm Signets {signetGroups.map(signetGroup => { return ( {signetGroup.name} ) })} Battlesuits {erBattlesuitCatalog.map(erBattlesuit => { const battlesuit = battlesuitCatalogMap.get(erBattlesuit.battlesuit)! return ( ) })} Supports {erSupports.map(support => { const battlesuit = battlesuitCatalogMap.get(support)! return ( {battlesuit.fullName} {/* */} ) })} Sigils {erSigils.map(sigil => { return ( ) })} ) } export default ErPage export async function getStaticProps({ locale }: NextPageContext) { const erBattlesuitCatalog = loadErBattlesuitCatalog() const battlesuitCatalog = loadBattlesuitCatalog() const erSupports = loadErSupports().map(support => { return support.battlesuit }) const erSigils = loadErSigils().map(sigil => { return { id: sigil.id, name: sigil.name } }) return { props: { erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils, ...(await getI18NProps(locale)) } } }