spb/cancerindex

1import Link from 'next/link';23export interface TabDef {4  key: string;5  label: string;6  href: string;7  count?: number | null;8}910/**11 * Sticky, horizontally scrollable tab bar (server component; the current tab is a route segment).12 * These are links to distinct URLs, so the correct semantics are a labelled <nav> with13 * aria-current="page" — not the ARIA tabs pattern, which implies in-page panel switching.14 */15export function Tabs({ tabs, current, ariaLabel }: { tabs: TabDef[]; current: string; ariaLabel: string }) {16  return (17    <nav aria-label={ariaLabel} className="ci-tabs -mx-4 px-4 sm:-mx-6 sm:px-6">18      <ul className="m-0 flex list-none p-0">19        {tabs.map((t) => (20          <li key={t.key}>21            <Link href={t.href} className="ci-tab" {...(t.key === current ? { 'aria-current': 'page' as const } : {})} scroll={false}>22              {t.label}23              {t.count != null && t.count > 0 ? (24                <span className="ci-num ml-1 text-[11px] text-ink-3" aria-label={`${t.count} items`}>25                  {t.count}26                </span>27              ) : null}28            </Link>29          </li>30        ))}31      </ul>32    </nav>33  );34}35