Navbar with Announcement Bar

"use client";

// Navbar with a dismissible announcement bar on top, plus a mobile dropdown.
// Pure Tailwind + React, no dependencies. Works with Tailwind v3 and v4.

import { useState } from "react";

type Link = { label: string; href: string };

type Props = {
  logo?: string;
  announcement?: { text: string; link: Link };
  links?: Link[];
  signIn?: Link;
  cta?: Link;
};

const DEFAULT_LINKS: Link[] = [
  { label: "Features", href: "#" },
  { label: "Services", href: "#" },
  { label: "Docs", href: "#" },
  { label: "Blog", href: "#" },
];

export default function NavbarNotify({
  logo = "Lumen",
  announcement = { text: "🎉 Version 2.0 is live:", link: { label: "See what's new →", href: "#" } },
  links = DEFAULT_LINKS,
  signIn = { label: "Sign in", href: "#" },
  cta = { label: "Get started", href: "#" },
}: Props) {
  const [showBar, setShowBar] = useState(true);
  const [open, setOpen] = useState(false);

  return (
    <div className="sticky top-0 z-50 w-full font-sans antialiased">
      {showBar && (
        <div className="relative flex items-center justify-center gap-3 bg-lime-300 px-10 py-2 text-black">
          <span className="text-center text-xs font-bold uppercase tracking-wider">
            {announcement.text}{" "}
            <a href={announcement.link.href} className="ml-1 underline hover:no-underline">
              {announcement.link.label}
            </a>
          </span>
          <button type="button" onClick={() => setShowBar(false)} className="absolute right-4 text-lg leading-none text-black/60 hover:text-black" aria-label="Dismiss announcement">
            ×
          </button>
        </div>
      )}

      <header className="border-b border-black/5 bg-white">
        <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-5 md:px-10">
          <a href="#" className="text-2xl font-bold uppercase tracking-tight text-black">
            {logo}
          </a>

          <nav className="hidden items-center gap-6 md:flex">
            {links.map((l) => (
              <a key={l.label} href={l.href} className="text-base text-neutral-600 transition-colors duration-150 hover:text-black">
                {l.label}
              </a>
            ))}
          </nav>

          <div className="hidden items-center gap-4 md:flex">
            <a href={signIn.href} className="text-base text-neutral-600 transition-colors hover:text-black">
              {signIn.label}
            </a>
            <a href={cta.href} className="rounded-full bg-black px-5 py-2.5 text-xs font-bold uppercase tracking-wider text-white transition-colors duration-200 hover:bg-neutral-700">
              {cta.label}
            </a>
          </div>

          <button type="button" className="relative flex h-6 w-6 items-center justify-center md:hidden" onClick={() => setOpen(!open)} aria-label="Toggle menu" aria-expanded={open}>
            <span className={`absolute h-px w-5 bg-black transition-all duration-300 ${open ? "rotate-45" : "-translate-y-2"}`} />
            <span className={`absolute h-px w-5 bg-black transition-all duration-300 ${open ? "opacity-0" : ""}`} />
            <span className={`absolute h-px w-5 bg-black transition-all duration-300 ${open ? "-rotate-45" : "translate-y-2"}`} />
          </button>
        </div>

        {open && (
          <div className="flex flex-col gap-3 border-t border-black/5 px-5 py-6 md:hidden">
            {links.map((l) => (
              <a key={l.label} href={l.href} onClick={() => setOpen(false)} className="py-1.5 text-sm text-neutral-600 transition-colors hover:text-black">
                {l.label}
              </a>
            ))}
            <a href={cta.href} className="mt-2 rounded-full bg-black px-5 py-3 text-center text-xs font-bold uppercase tracking-wider text-white">
              {cta.label}
            </a>
          </div>
        )}
      </header>
    </div>
  );
}