spb/countryatlas

1import Link from 'next/link';2import { cn } from '@/lib/cn';3import { routes } from '@/lib/site';45/** Flag + name link. `size="sm"` for inline mentions, default for lists. */6export function CountryChip({ country, size = 'md', className, muted }: { country: { slug: string; short_name?: string; name?: string; flag_emoji?: string | null; flag?: string | null }; size?: 'sm' | 'md'; className?: string; muted?: boolean }) {7  const name = country.short_name ?? country.name ?? country.slug;8  const flag = country.flag_emoji ?? country.flag ?? '';9  return (10    <Link href={routes.country(country.slug)} className={cn('link-quiet inline-flex max-w-full items-center gap-1.5 align-baseline', size === 'sm' ? 'text-sm' : 'text-base', muted && 'text-ink-2', className)}>11      {flag ? (12        <span aria-hidden className={size === 'sm' ? 'text-sm leading-none' : 'text-lg leading-none'}>13          {flag}14        </span>15      ) : null}16      <span className="truncate">{name}</span>17    </Link>18  );19}20