spb/cancerindex

1import Link from 'next/link';2import { NAV } from '@/lib/site';3import { CommandPalette } from './command-palette';4import { MobileNav } from './mobile-nav';5import { ThemeToggle } from './theme-toggle';6import { BrandMark } from './brand-mark';78export function SiteHeader() {9  return (10    <header className="sticky top-0 z-30 border-b border-rule bg-paper/95 backdrop-blur-sm" style={{ height: 'var(--ci-header-h)' }}>11      <div className="mx-auto flex h-full max-w-[1400px] items-center gap-4 px-4 sm:px-6">12        <Link href="/" className="flex items-center gap-2.5 no-underline" aria-label="CancerIndex home">13          <BrandMark size={26} className="shrink-0 text-ink" />14          <span className="font-display text-[20px] font-medium tracking-tight text-ink">15            Cancer<span className="text-accent">Index</span>16          </span>17          <span className="hidden text-[11px] uppercase tracking-[0.08em] text-ink-3 md:inline">the global index of cancer</span>18        </Link>19        <nav aria-label="Primary" className="ml-2 hidden flex-1 items-center gap-4 lg:flex">20          {NAV.map((n) => (21            <Link key={n.href} href={n.href} className="text-[13.5px] text-ink-2 no-underline hover:text-accent">22              {n.label}23            </Link>24          ))}25        </nav>26        <div className="ml-auto flex items-center gap-2">27          <CommandPalette />28          <ThemeToggle />29          <MobileNav />30        </div>31      </div>32    </header>33  );34}35