Sliding Tabs

"use client";

import { useState } from "react";

const TABS = [
  { label: "Preview", body: "Live component preview." },
  { label: "Code", body: "Copy-ready source." },
  { label: "Docs", body: "Props and usage notes." },
];

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

  return (
    <div className="w-72">
      <div className="relative flex border-b border-neutral-800">
        <span
          aria-hidden="true"
          className="absolute bottom-0 left-0 h-0.5 w-1/3 rounded-full bg-amber-500 transition-transform duration-300 ease-out"
          style={{ transform: "translateX(" + active * 100 + "%)" }}
        />
        {TABS.map((tab, i) => (
          <button
            key={tab.label}
            type="button"
            onClick={() => setActive(i)}
            className={
              "w-1/3 pb-2 text-xs font-medium transition-colors duration-300 " +
              (i === active ? "text-neutral-50" : "text-neutral-400")
            }
          >
            {tab.label}
          </button>
        ))}
      </div>
      <p key={active} className="mt-3 text-center text-xs text-neutral-400">
        {TABS[active].body}
      </p>
    </div>
  );
}