spb/countryatlas

1import { ArrowRight } from 'lucide-react';2import Link from 'next/link';3import { t } from '@/i18n';4import { routes } from '@/lib/site';5import type { CountrySummary } from '@/lib/types';67export const COMPARE_PRESETS: Array<[string, string]> = [8  ['canada', 'united-states'],9  ['france', 'germany'],10  ['japan', 'south-korea'],11  ['brazil', 'mexico'],12  ['india', 'china'],13  ['nigeria', 'south-africa'],14  ['australia', 'united-kingdom'],15  ['sweden', 'norway'],16];1718/** Preset pairs linking to /compare/a/b (built by the next agent). Uses the countries list for flags/names. */19export function CompareTeaser({ countries }: { countries: CountrySummary[] }) {20  const bySlug = new Map(countries.map((c) => [c.slug, c]));21  const pairs = COMPARE_PRESETS.map(([a, b]) => [bySlug.get(a), bySlug.get(b)] as const).filter((p): p is [CountrySummary, CountrySummary] => !!p[0] && !!p[1]);22  return (23    <div>24      <ul className="grid gap-x-8 sm:grid-cols-2 lg:grid-cols-4">25        {pairs.map(([a, b]) => (26          <li key={`${a.slug}-${b.slug}`} className="border-t border-rule">27            <Link href={routes.compare(a.slug ?? a.id, b.slug ?? b.id)} className="group flex min-h-[56px] items-center gap-2 py-2.5 text-sm">28              <span aria-hidden className="text-lg leading-none">29                {a.flag}30              </span>31              <span className="truncate text-ink group-hover:text-accent">{a.name}</span>32              <span className="text-ink-3">vs</span>33              <span aria-hidden className="text-lg leading-none">34                {b.flag}35              </span>36              <span className="truncate text-ink group-hover:text-accent">{b.name}</span>37              <ArrowRight size={14} aria-hidden className="ml-auto shrink-0 text-ink-3 group-hover:text-accent" />38            </Link>39          </li>40        ))}41      </ul>42      <Link href={routes.compare()} className="mt-3 inline-flex min-h-[40px] items-center text-sm text-accent hover:underline">43        {t('home.compare.custom')} →44      </Link>45    </div>46  );47}48