spb/countryatlas

1import Link from 'next/link';2import { t } from '@/i18n';3import { compact, grouped } from '@/lib/format';4import { routes } from '@/lib/site';5import type { Source } from '@/lib/types-explore';67/** Data transparency block: the sources with licence + counts, and the trust links (methodology, provenance, API). */8export function Transparency({ sources }: { sources: Source[] }) {9  const rows = [...sources].sort((a, b) => (b.n_observations ?? 0) - (a.n_observations ?? 0));10  return (11    <div className="grid gap-x-10 gap-y-6 lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)]">12      <ul className="divide-y divide-rule border-y border-rule text-sm">13        {rows.map((s) => (14          <li key={s.id} className="grid grid-cols-[minmax(0,1fr)_auto] items-baseline gap-x-4 py-2 md:grid-cols-[minmax(0,11rem)_minmax(0,1fr)_7rem_6rem]">15            <Link href={routes.source(s.id)} className="link-quiet font-medium text-ink">16              {s.name ?? s.id}17            </Link>18            <span className="hidden truncate text-xs text-ink-3 md:block">{s.organization}</span>19            <span className="tnum text-right text-xs text-ink-2 md:text-left">{s.n_observations != null ? t('home.transparency.obs', { n: compact(s.n_observations) }) : ''}</span>20            <span className="hidden truncate text-xs text-ink-3 md:block">{s.licence ?? ''}</span>21          </li>22        ))}23      </ul>24      <div className="max-w-prose text-sm leading-relaxed text-ink-2">25        <p>{t('home.transparency.text', { n: grouped(sources.length) })}</p>26        <ul className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-sm">27          <li>28            <Link href={routes.methodology()} className="inline-flex min-h-[44px] items-center md:min-h-[36px] text-accent hover:underline">29              {t('site.footer.methodology')} →30            </Link>31          </li>32          <li>33            <Link href={routes.sources()} className="inline-flex min-h-[44px] items-center md:min-h-[36px] text-accent hover:underline">34              {t('site.footer.sources')} →35            </Link>36          </li>37          <li>38            <Link href={routes.api()} className="inline-flex min-h-[44px] items-center md:min-h-[36px] text-accent hover:underline">39              {t('site.footer.api')} →40            </Link>41          </li>42          <li>43            <Link href={routes.download()} className="inline-flex min-h-[44px] items-center md:min-h-[36px] text-accent hover:underline">44              {t('site.footer.data')} →45            </Link>46          </li>47        </ul>48      </div>49    </div>50  );51}52