spb/countryatlas

1import Link from 'next/link';2import { t } from '@/i18n';3import { formatDate, formatPct, grouped } from '@/lib/format';4import { routes } from '@/lib/site';5import { topicById } from '@/lib/topics';6import type { IndicatorSummary } from '@/lib/types';78/** Featured / recently updated indicators as a dense list (name, topic, coverage, last year). */9export function IndicatorList({ items, showUpdated = false, limit = 12 }: { items: IndicatorSummary[]; showUpdated?: boolean; limit?: number }) {10  if (items.length === 0) return <p className="py-4 text-sm text-ink-3">{t('common.noDataLong')}</p>;11  return (12    <ul className="divide-y divide-rule">13      {items.slice(0, limit).map((ind) => (14        <li key={ind.id}>15          <Link href={routes.indicator(ind.slug)} className="group grid min-h-[48px] grid-cols-[1fr_auto] items-center gap-x-4 py-2">16            <span className="min-w-0">17              <span className="block truncate text-sm text-ink group-hover:text-accent">{ind.name ?? ind.slug}</span>18              <span className="block truncate text-xs text-ink-3">19                {topicById(ind.topic ?? '')?.short ?? ind.topic}20                {ind.unit ? ` · ${ind.unit}` : ''}21              </span>22            </span>23            <span className="tnum text-right text-xs text-ink-2">24              {showUpdated && ind.latest_source_updated_at ? <span className="block">{formatDate(ind.latest_source_updated_at)}</span> : null}25              {ind.n_countries != null ? <span className="block">{grouped(ind.n_countries)} countries</span> : null}26              {ind.coverage_pct != null && !showUpdated ? <span className="block text-ink-3">{formatPct(ind.coverage_pct)}</span> : ind.last_year ? <span className="block text-ink-3">→ {ind.last_year}</span> : null}27            </span>28          </Link>29        </li>30      ))}31    </ul>32  );33}34