spb/countryatlas

1import { ChevronRight } from 'lucide-react';2import Link from 'next/link';3import { t } from '@/i18n';4import { routes } from '@/lib/site';5import { TOPICS } from '@/lib/topics';6import type { TopicSummary } from '@/lib/types';78/** Navigation to the 19 topic pages with indicator counts (n with data / n total). */9export function CountryTopicsGrid({ slug, topics }: { slug: string; topics: TopicSummary[] }) {10  const byId = new Map(topics.map((tp) => [tp.id, tp]));11  return (12    <ul className="grid gap-x-8 sm:grid-cols-2 lg:grid-cols-3">13      {TOPICS.map((def) => {14        const tp = byId.get(def.id);15        return (16          <li key={def.id} className="border-t border-rule">17            <Link href={routes.countryTopic(slug, def.id)} className="group flex min-h-[56px] items-center justify-between gap-3 py-2.5">18              <span className="min-w-0">19                <span className="block truncate text-sm font-medium text-ink group-hover:text-accent">{def.name}</span>20                <span className="tnum block text-xs text-ink-3">21                  {tp ? `${t('country.topics.withData', { n: tp.n_with_data })} · ${t('country.topics.count', { n: tp.n_indicators })}` : def.blurb}22                </span>23              </span>24              <ChevronRight size={16} aria-hidden className="shrink-0 text-ink-3 group-hover:text-accent" />25            </Link>26          </li>27        );28      })}29    </ul>30  );31}32