Pill Navbar

"use client";

import { useState } from "react";

const ITEMS = ["Home", "Work", "About", "Contact"];

export function PillNavbar() {
  const [active, setActive] = useState(0);

  return (
    <nav className="relative flex rounded-full border border-neutral-800 bg-neutral-900 p-1">
      <span
        aria-hidden="true"
        className="absolute inset-y-1 left-1 w-20 rounded-full bg-amber-500 transition-transform duration-300 ease-out"
        style={{ transform: "translateX(" + active * 100 + "%)" }}
      />
      {ITEMS.map((item, i) => (
        <button
          key={item}
          type="button"
          onClick={() => setActive(i)}
          className={
            "relative w-20 py-1.5 text-xs font-medium transition-colors duration-300 " +
            (i === active ? "text-neutral-950" : "text-neutral-400")
          }
        >
          {item}
        </button>
      ))}
    </nav>
  );
}