spb/market-atlas

1"use client";23import Link from "next/link";4import { usePathname } from "next/navigation";5import { cx } from "@/lib/format";6import { Wordmark } from "./logo";7import { MarketClock } from "./market-clock";8import { SearchButton } from "./search-dialog";9import { ThemeToggle } from "./theme-toggle";10import { StreamIndicator } from "./stream-indicator";1112const NAV: Array<{ href: string; label: string; match?: RegExp }> = [13  { href: "/markets", label: "Markets", match: /^\/(markets|stocks|etfs|indices|crypto|forex|rates|commodities|instruments)/ },14  { href: "/live", label: "Live" },15  { href: "/events", label: "Events", match: /^\/(events|halts|filings)/ },16  { href: "/exchanges", label: "World", match: /^\/(exchanges|countries)/ },17  { href: "/sources", label: "Sources", match: /^\/(sources|connectors|data-health|status|coverage)/ },18  { href: "/compare", label: "Compare" },19];2021export function SiteHeader() {22  const path = usePathname();23  return (24    <header className="sticky top-0 z-[100] border-b border-rule bg-canvas/85 backdrop-blur supports-[backdrop-filter]:bg-canvas/70">25      <div className="mx-auto flex h-[var(--header-h)] max-w-[1440px] items-center gap-3 px-3 sm:px-5">26        <Link href="/" className="flex h-11 items-center pr-1" aria-label="Market Atlas home">27          <Wordmark className="text-[15px]" />28        </Link>29        <nav className="hidden items-center gap-0.5 lg:flex" aria-label="Primary">30          {NAV.map((n) => {31            const active = (n.match ?? new RegExp(`^${n.href}`)).test(path);32            return (33              <Link key={n.href} href={n.href} className={cx("flex h-11 items-center rounded-md px-3 text-[13.5px]", active ? "text-ink font-medium" : "text-ink-2 hover:bg-surface-2 hover:text-ink")}>34                {n.label}35              </Link>36            );37          })}38        </nav>39        <div className="ml-auto flex items-center gap-1.5">40          <StreamIndicator className="hidden md:flex" />41          <SearchButton />42          <ThemeToggle />43        </div>44      </div>45      <div className="hidden border-t border-rule/60 md:block">46        <div className="mx-auto max-w-[1440px] px-5 py-1">47          <MarketClock />48        </div>49      </div>50    </header>51  );52}53