Navbar Float

"use client";

// Floating pill navbar: a rounded, blurred dark bar that sits below the top
// edge, with pill links and a mobile dropdown inside the same capsule.
// 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;
  links?: Link[];
  signIn?: Link;
  cta?: Link;
};

const DEFAULT_LINKS: Link[] = [
  { label: "Product", href: "#" },
  { label: "Customers", href: "#" },
  { label: "Pricing", href: "#" },
  { label: "Changelog", href: "#" },
];

export default function NavbarFloat({
  logo = "Lumen",
  links = DEFAULT_LINKS,
  signIn = { label: "Sign in", href: "#" },
  cta = { label: "Get started", href: "#" },
}: Props) {
  const [open, setOpen] = useState(false);

  return (
    <div className="sticky top-4 z-50 flex w-full justify-center px-4 pt-5 font-sans antialiased">
      <header className="w-full max-w-3xl rounded-2xl border border-white/10 bg-zinc-900/90 backdrop-blur-xl">
        <div className="flex h-14 items-center justify-between px-5">
          <a href="#" className="font-serif text-2xl font-bold uppercase tracking-tight text-white">
            {logo}
          </a>

          <nav className="hidden items-center gap-1 md:flex">
            {links.map((l) => (
              <a key={l.label} href={l.href} className="rounded-full px-3 py-1.5 text-sm text-zinc-400 transition-all duration-150 hover:bg-white/5 hover:text-white">
                {l.label}
              </a>
            ))}
          </nav>

          <div className="hidden items-center gap-2 md:flex">
            <a href={signIn.href} className="rounded-full bg-white/5 px-3 py-1.5 text-sm text-zinc-400 transition-all duration-150 hover:bg-white/10 hover:text-white">
              {signIn.label}
            </a>
            <a href={cta.href} className="rounded-full bg-lime-500 px-4 py-2 text-sm font-semibold text-black transition-colors duration-200 hover:bg-lime-400">
              {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-white transition-all duration-300 ${open ? "rotate-45" : "-translate-y-2"}`} />
            <span className={`absolute h-px w-5 bg-white transition-all duration-300 ${open ? "opacity-0" : ""}`} />
            <span className={`absolute h-px w-5 bg-white transition-all duration-300 ${open ? "-rotate-45" : "translate-y-2"}`} />
          </button>
        </div>

        {open && (
          <div className="flex flex-col gap-1 border-t border-white/10 px-5 py-5 md:hidden">
            {links.map((l) => (
              <a key={l.label} href={l.href} onClick={() => setOpen(false)} className="rounded-full px-3 py-2 text-sm text-zinc-400 transition-all hover:bg-white/5 hover:text-white">
                {l.label}
              </a>
            ))}
            <div className="flex flex-col gap-2 border-t border-white/10 pt-3">
              <a href={signIn.href} className="px-3 py-2 text-sm text-zinc-400">
                {signIn.label}
              </a>
              <a href={cta.href} className="rounded-full bg-white px-4 py-2.5 text-center text-sm font-semibold text-black">
                {cta.label}
              </a>
            </div>
          </div>
        )}
      </header>
    </div>
  );
}