spb/datacenterindex

1import type { SourceRef } from "@dci/core";2import { ExternalLink } from "lucide-react";3import Link from "next/link";4import { SOURCE_KIND_LABEL } from "@/lib/labels";5import { routes } from "@/lib/routes";67/** Attribution footer listing the sources behind the figures on the page (from the API envelope `sources`). */8export function SourcesFooter({ sources, updatedAt, note }: { sources: SourceRef[] | undefined | null; updatedAt?: string | null; note?: string }) {9  const list = sources ?? [];10  return (11    <footer className="mt-10 border-t border-hair pt-4 text-[12px] text-ink-3">12      <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">13        <div className="label-caps">Sources &amp; attribution</div>14        {updatedAt && <div className="figure text-[11.5px]">Record updated {new Date(updatedAt).toISOString().slice(0, 10)} UTC</div>}15      </div>16      {list.length ? (17        <ul className="mt-2 divide-y divide-hair">18          {list.map((s) => (19            <li key={s.id} className="flex flex-col gap-0.5 py-2 sm:flex-row sm:items-baseline sm:gap-3">20              <div className="flex min-w-0 items-center gap-2 sm:w-[260px] sm:shrink-0">21                <Link href={routes.source(s.id)} className="truncate font-medium text-ink-2 hover:text-ink hover:underline">22                  {s.name}23                </Link>24                <span className="shrink-0 text-[11px] text-ink-4">{SOURCE_KIND_LABEL[s.kind]}</span>25              </div>26              <div className="min-w-0 flex-1">27                {s.attribution && <span className="text-ink-3">{s.attribution}</span>}28                {s.license && <span className="text-ink-4"> · {s.license.length > 90 ? `${s.license.slice(0, 87)}…` : s.license}</span>}29              </div>30              {s.url && (31                <a href={s.url} target="_blank" rel="noopener noreferrer" className="inline-flex shrink-0 items-center gap-1 text-ink-3 hover:text-accent">32                  {s.domain} <ExternalLink className="size-3" />33                </a>34              )}35            </li>36          ))}37        </ul>38      ) : (39        <p className="mt-2">Every figure on this page links to the page it was observed on; see the provenance table above.</p>40      )}41      <p className="mt-3 text-[11.5px] text-ink-4">42        {note ?? "Figures are lower bounds computed from published or filed values only; estimates are marked ≈. Nothing is imputed."}{" "}43        <Link href={routes.methodology()} className="underline decoration-hair-2 hover:text-ink">44          Methodology45        </Link>46      </p>47    </footer>48  );49}50