spb/countryatlas

1import type { Metadata } from 'next';2import { Suspense } from 'react';3import { t } from '@/i18n';4import { api, isNotBuilt } from '@/lib/api';5import { grouped } from '@/lib/format';6import { CountryDirectory } from '@/components/countries/directory';7import { NotBuiltState } from '@/components/data/empty-state';89export const metadata: Metadata = {10  title: t('countries.title'),11  description: t('countries.sub', { n: 218 }),12  alternates: { canonical: '/countries' },13};14export const revalidate = 900;1516export default async function CountriesPage() {17  let items: Awaited<ReturnType<typeof api.countries>>['items'] = [];18  let notBuilt = false;19  try {20    items = (await api.countries({ sort: 'name' })).items;21  } catch (e) {22    if (isNotBuilt(e)) notBuilt = true;23    else throw e;24  }25  return (26    <>27      <header className="pb-2 pt-6 md:pt-10">28        <h1 className="display text-3xl text-ink md:text-4xl">{t('countries.title')}</h1>29        <p className="mt-2 max-w-prose text-sm text-ink-2 md:text-base">{t('countries.sub', { n: grouped(items.length || 218) })}</p>30      </header>31      {notBuilt ? (32        <NotBuiltState />33      ) : (34        <Suspense fallback={null}>35          <CountryDirectory items={items} />36        </Suspense>37      )}38    </>39  );40}41