Navbar — with announcement bar

"use client";
import { useState } from "react";
import { ArrowRight, Menu, X } from "lucide-react";

const announcement = { tag: "New", text: "Fernbill now pays out in 24 currencies.", link: { label: "Read the update", href: "/changelog/currencies" } };
const links = [
  { label: "Product", href: "/product" },
  { label: "Pricing", href: "/pricing" },
  { label: "Customers", href: "/customers" },
  { label: "Changelog", href: "/changelog" },
];

export function NavbarWithAnnouncement() {
  const [showBar, setShowBar] = useState(true);
  return (
    <div className="font-sans">
      {showBar && (
        <div role="region" aria-label="Announcement" className="relative flex min-h-10 flex-wrap items-center gap-x-2.5 gap-y-1 bg-primary py-2 pl-4 pr-11 text-[13.5px] text-primary-fg sm:justify-center sm:px-12 sm:text-center">
          <span className="rounded-full bg-primary-fg/20 px-2 py-0.5 text-xs font-semibold">{announcement.tag}</span>
          <span>{announcement.text}</span>
          <a href={announcement.link.href} className="inline-flex items-center gap-1 whitespace-nowrap font-semibold hover:underline hover:underline-offset-4">
            {announcement.link.label} <ArrowRight className="size-3.5" aria-hidden />
          </a>
          <button
            type="button"
            aria-label="Dismiss announcement"
            onClick={() => setShowBar(false)}
            className="absolute right-2.5 top-1/2 grid size-7 -translate-y-1/2 place-items-center rounded opacity-80 hover:bg-primary-fg/15 hover:opacity-100"
          >
            <X className="size-4" />
          </button>
        </div>
      )}
      <header className="border-b border-border bg-bg">
        <div className="mx-auto flex h-16 max-w-6xl items-center gap-6 px-4 sm:px-7">
          <a href="/" className="flex items-center gap-2 text-base font-semibold tracking-tight text-fg">
            <span aria-hidden className="size-6 rounded-sm bg-primary" />
            Fernbill
          </a>
          <nav aria-label="Main" className="hidden sm:block">
            <ul className="flex gap-0.5">
              {links.map((l) => (
                <li key={l.href}>
                  <a href={l.href} className="inline-flex h-9 items-center rounded px-3 text-sm text-fg-muted transition hover:bg-surface hover:text-fg">{l.label}</a>
                </li>
              ))}
            </ul>
          </nav>
          <div className="ml-auto flex items-center gap-2">
            <a href="/login" className="hidden h-9 items-center rounded px-3 text-sm font-medium text-fg hover:bg-surface-2 sm:inline-flex">Log in</a>
            <a href="/signup" className="inline-flex h-9 items-center rounded bg-primary px-3.5 text-sm font-medium text-primary-fg transition hover:bg-primary-hover">Start free</a>
            <button type="button" aria-label="Open menu" className="inline-grid size-9 place-items-center rounded text-fg hover:bg-surface-2 sm:hidden">
              <Menu className="size-4" />
            </button>
          </div>
        </div>
      </header>
    </div>
  );
}