Navbar Ticker

"use client";

import { useEffect, useId, useState } from "react";
import { Menu, X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface NavbarTickerLink {
  label: string;
  href: string;
}

export interface NavbarTickerProps {
  brand?: string;
  brandHref?: string;
  /** Items scrolling in the announcement strip above the bar. */
  announcements?: string[];
  links?: NavbarTickerLink[];
  cta?: NavbarTickerLink;
  className?: string;
}

export function NavbarTicker({
  brand = "Shipyard",
  brandHref = "/",
  announcements = ["v4.2 — AI release summaries", "Free for open source", "New: Linear integration", "2,400+ teams shipping"],
  links = [
    { label: "Product", href: "#product" },
    { label: "Changelog", href: "#changelog" },
    { label: "Pricing", href: "#pricing" },
    { label: "Docs", href: "#docs" },
  ],
  cta = { label: "Get started →", href: "#signup" },
  className,
}: NavbarTickerProps) {
  const [open, setOpen] = useState(false);
  const menuId = useId();

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  const strip = announcements.map((a) => (
    <span key={a} className="flex shrink-0 items-center gap-6 pr-6">
      {a}
      <span aria-hidden>✸</span>
    </span>
  ));

  return (
    <header className={cn("sticky top-0 z-40 bg-da-bg text-da-fg", className)}>
      <div className="da-stroke-b overflow-hidden bg-da-fg py-1.5 font-da-mono text-xs font-bold tracking-da-label text-da-bg uppercase">
        <p className="sr-only">{announcements.join(" · ")}</p>
        <div aria-hidden className="brutalist-ticker flex w-max">
          <div className="flex">{strip}</div>
          <div className="flex">{strip}</div>
        </div>
      </div>
      <nav aria-label="Main" className="da-stroke-b">
        <div className="da-container flex h-16 items-stretch">
          <a href={brandHref} className="da-focus da-stroke-r flex items-center pr-6 font-da-display text-2xl tracking-da-display uppercase">
            {brand}
          </a>
          <ul className="hidden flex-1 md:flex">
            {links.map((l) => (
              <li key={l.href} className="da-stroke-r flex">
                <a
                  href={l.href}
                  className="da-focus da-transition flex items-center px-6 text-sm font-bold uppercase hover:bg-da-primary hover:text-da-primary-fg"
                >
                  {l.label}
                </a>
              </li>
            ))}
          </ul>
          <a
            href={cta.href}
            className="da-focus da-transition ml-auto hidden items-center bg-da-secondary px-6 text-sm font-bold text-da-secondary-fg uppercase hover:bg-da-fg hover:text-da-bg md:flex"
          >
            {cta.label}
          </a>
          <button
            type="button"
            aria-expanded={open}
            aria-controls={menuId}
            aria-label={open ? "Close menu" : "Open menu"}
            onClick={() => setOpen((o) => !o)}
            className="da-focus da-stroke-l ml-auto grid w-16 place-items-center md:hidden"
          >
            {open ? <X aria-hidden className="size-6" /> : <Menu aria-hidden className="size-6" />}
          </button>
        </div>
      </nav>
      <div id={menuId} hidden={!open} className="da-stroke-b md:hidden">
        <ul>
          {links.map((l) => (
            <li key={l.href} className="da-stroke-b">
              <a href={l.href} onClick={() => setOpen(false)} className="da-focus block px-5 py-4 font-bold uppercase hover:bg-da-primary hover:text-da-primary-fg">
                {l.label}
              </a>
            </li>
          ))}
        </ul>
        <a href={cta.href} className="da-focus block bg-da-secondary px-5 py-4 font-bold text-da-secondary-fg uppercase">
          {cta.label}
        </a>
      </div>
      <style href="brutalist-ticker" precedence="default">{`
        @keyframes brutalist-ticker { from { translate: 0 0 } to { translate: -50% 0 } }
        .brutalist-ticker { animation: brutalist-ticker 28s linear infinite }
        @media (prefers-reduced-motion: reduce) { .brutalist-ticker { animation: none } }
      `}</style>
    </header>
  );
}

export default NavbarTicker;