spb/ai-atlas

1import Link from 'next/link';2import { cn } from '@/lib/cn';3import { fmtInt } from '@/lib/format';45export type ChipItem = { href: string; label: string; count?: number | string | null; active?: boolean };67/**8 * Horizontal row of link chips (years, categories, ranges). Scrolls on mobile without a visible scrollbar,9 * wraps on desktop. Server component — selection lives in the URL.10 */11export function ChipRow({ items, label, className }: { items: ChipItem[]; label: string; className?: string }) {12  if (!items.length) return null;13  return (14    <nav aria-label={label} className={cn('no-scrollbar -mx-4 flex gap-1.5 overflow-x-auto px-4 md:mx-0 md:flex-wrap md:px-0', className)}>15      {items.map((it) => (16        <Link key={it.href + it.label} href={it.href} aria-current={it.active ? 'true' : undefined} className={cn('inline-flex h-9 shrink-0 items-center gap-1.5 border px-2.5 text-sm transition-colors', it.active ? 'border-ink bg-ink text-canvas' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink')}>17          <span>{it.label}</span>18          {it.count !== undefined && it.count !== null && <span className={cn('tnum text-[11px]', it.active ? 'text-canvas/70' : 'text-ink-3')}>{fmtInt(it.count)}</span>}19        </Link>20      ))}21    </nav>22  );23}24