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';67export function SiteHeader() {8  return (9    <header className="sticky top-0 z-30 border-b border-rule bg-paper/95 backdrop-blur-sm" style={{ height: 'var(--ci-header-h)' }}>10      <div className="mx-auto flex h-full max-w-[1400px] items-center gap-4 px-4 sm:px-6">11        <Link href="/" className="flex items-baseline gap-2 no-underline">12          <span className="font-display text-[20px] font-medium tracking-tight text-ink">CancerIndex</span>13          <span className="hidden text-[11px] uppercase tracking-[0.08em] text-ink-3 md:inline">the global index of cancer</span>14        </Link>15        <nav aria-label="Primary" className="ml-2 hidden flex-1 items-center gap-4 lg:flex">16          {NAV.map((n) => (17            <Link key={n.href} href={n.href} className="text-[13.5px] text-ink-2 no-underline hover:text-accent">18              {n.label}19            </Link>20          ))}21        </nav>22        <div className="ml-auto flex items-center gap-2">23          <CommandPalette />24          <ThemeToggle />25          <MobileNav />26        </div>27      </div>28    </header>29  );30}31