spb/company-atlas

1'use client';2import { Search } from 'lucide-react';3import Link from 'next/link';4import { usePathname } from 'next/navigation';5import { Wordmark } from '@/components/brand/logo';6import { cn } from '@/lib/cn';7import { primaryNav, routes } from '@/lib/site';8import { DensityToggle } from './density';9import { useOpenSearch } from './search-context';10import { ThemeToggle } from './theme';1112/** Header: lockup · Home Live Companies Events Rankings Industries Countries · ⌘K search · theme · density. */13export function SiteHeader() {14  const pathname = usePathname();15  const openSearch = useOpenSearch();16  const isActive = (href: string) => (href === '/' ? pathname === '/' : pathname === href || pathname.startsWith(href + '/'));17  return (18    <header className="sticky top-0 z-40 border-b border-rule bg-canvas/85 backdrop-blur-md">19      <div className="container-x mx-auto flex h-[var(--header-h)] max-w-[1600px] items-center gap-3">20        <Link href={routes.home()} className="flex h-11 items-center" aria-label="Company Atlas home">21          <Wordmark />22        </Link>23        <nav aria-label="Primary" className="ml-3 hidden items-center gap-0.5 lg:flex">24          {primaryNav.map((n) => (25            <Link key={n.href} href={n.href} aria-current={isActive(n.href) ? 'page' : undefined} className={cn('flex h-9 items-center gap-1.5 rounded-sm px-2.5 text-[13.5px] transition-colors', isActive(n.href) ? 'font-medium text-ink' : 'text-ink-2 hover:text-ink')}>26              {n.href === '/live' && <span className="dot" aria-hidden />}27              {n.label}28            </Link>29          ))}30        </nav>31        <div className="ml-auto flex items-center gap-1">32          <button type="button" onClick={openSearch} className="hidden h-9 min-w-[250px] items-center gap-2 rounded-sm border border-rule bg-surface px-3 text-sm text-ink-3 hover:border-rule-strong hover:text-ink-2 md:flex" aria-label="Open search" data-open-palette>33            <Search className="size-4" aria-hidden />34            <span className="flex-1 text-left">Search or ask…</span>35            <kbd className="mono rounded-[3px] border border-rule px-1.5 py-0.5 text-[10px]">⌘K</kbd>36          </button>37          <button type="button" onClick={openSearch} className="flex size-11 items-center justify-center rounded-sm text-ink-2 hover:bg-surface-2 hover:text-ink md:hidden" aria-label="Open search">38            <Search className="size-5" aria-hidden />39          </button>40          <ThemeToggle />41          <DensityToggle />42        </div>43      </div>44    </header>45  );46}47