spb/countryatlas

1import type { Metadata } from 'next';2import Link from 'next/link';3import { t } from '@/i18n';4import { isNotBuilt } from '@/lib/api';5import { apiExplore } from '@/lib/api-explore';6import { formatDate } from '@/lib/format';7import { routes } from '@/lib/site';8import type { ChangesFeedResponse } from '@/lib/types-explore';9import { ChangesFeed } from '@/components/changes/changes-feed';10import { NotBuiltState } from '@/components/data/empty-state';11import { PageHeader } from '@/components/explore/page-header';1213export const revalidate = 900;1415export const metadata: Metadata = {16  title: t('changes.title'),17  description: t('changes.sub'),18  alternates: { canonical: routes.changes() },19};2021export default async function ChangesPage() {22  let data: ChangesFeedResponse | null = null;23  try {24    data = await apiExplore.changes({ limit: 100 });25  } catch (e) {26    if (!isNotBuilt(e)) throw e;27  }28  return (29    <>30      <PageHeader title={t('changes.title')} lede={t('changes.sub')} meta={data?.meta.built_at ? t('site.footer.refreshed', { date: formatDate(data.meta.built_at) }) : undefined} />31      {!data ? (32        <NotBuiltState />33      ) : (34        <>35          <details className="mb-2 border-y border-rule py-3 text-sm">36            <summary className="flex min-h-[44px] cursor-pointer list-none items-center gap-2 font-medium text-ink-2 hover:text-ink">37              <span aria-hidden>›</span> {t('changes.methodology')}38            </summary>39            <p className="mt-2 max-w-prose leading-relaxed text-ink-2">{t('changes.how')}</p>40            <p className="mt-2 text-xs">41              <Link href={`${routes.methodology()}#changes`} className="text-accent hover:underline">42                {t('site.footer.methodology')} →43              </Link>44            </p>45          </details>46          <ChangesFeed initial={data.items} kinds={data.kinds ?? []} limit={100} />47        </>48      )}49    </>50  );51}52