import { GetStaticProps } from "next"; import { AppLayout, AppLayoutRequired } from "components/AppLayout"; import { PanelHeader } from "components/PanelComponents/PanelHeader"; import { SubPanel } from "components/Containers/SubPanel"; import { getReadySdk } from "graphql/sdk"; import { GetChroniclesChaptersQuery } from "graphql/generated"; import { getOpenGraph } from "helpers/openGraph"; import { HorizontalLine } from "components/HorizontalLine"; import { useFormat } from "hooks/useFormat"; import { getFormat } from "helpers/i18n"; import { ChroniclesLists } from "components/Chronicles/ChroniclesLists"; /* * ╭────────╮ * ──────────────────────────────────────────╯ PAGE ╰───────────────────────────────────────────── */ interface Props extends AppLayoutRequired { chapters: NonNullable<GetChroniclesChaptersQuery["chroniclesChapters"]>["data"]; } const Chronicles = ({ chapters, ...otherProps }: Props): JSX.Element => { const { format } = useFormat(); const subPanel = ( <SubPanel> <PanelHeader icon="schedule" title={format("chronicles")} description={format("chronicles_description")} /> <HorizontalLine /> <ChroniclesLists chapters={chapters} /> </SubPanel> ); return <AppLayout subPanel={subPanel} {...otherProps} />; }; export default Chronicles; /* * ╭──────────────────────╮ * ───────────────────────────────────╯ NEXT DATA FETCHING ╰────────────────────────────────────── */ export const getStaticProps: GetStaticProps = async (context) => { const sdk = getReadySdk(); const { format } = getFormat(context.locale); const chronicles = await sdk.getChroniclesChapters(); if (!chronicles.chroniclesChapters?.data) return { notFound: true }; const props: Props = { chapters: chronicles.chroniclesChapters.data, openGraph: getOpenGraph(format, format("chronicles")), }; return { props: props, }; };