Underline Tabs

/* Source: Mark Mead (HyperUI) — https://github.com/markmead/hyperui/blob/main/public/examples/application/tabs/4.html — MIT. Included under its original licence. */
/* Copyright (c) Mark Mead — HyperUI (https://www.hyperui.dev). Licensed under the MIT License. */
"use client";

import { useState } from "react";

const TABS = [
  {
    label: "Overview",
    body: "A high-level snapshot of your workspace. Track active projects, recent activity and the metrics that matter most, all from a single unified view.",
  },
  {
    label: "Analytics",
    body: "Dig into trends over time with cohort breakdowns, conversion funnels and retention curves. Filter by segment to find where growth is really coming from.",
  },
  {
    label: "Reports",
    body: "Generate shareable summaries on any schedule. Export to PDF or CSV and send them straight to your team so everyone stays aligned on the numbers.",
  },
];

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

  return (
    <div className="mx-auto max-w-3xl p-6">
      <div role="tablist" aria-label="Sections" className="flex gap-2 border-b border-gray-200 dark:border-gray-700">
        {TABS.map((tab, index) => {
          const selected = index === active;
          return (
            <button
              key={tab.label}
              role="tab"
              type="button"
              aria-selected={selected}
              aria-controls={`tabpanel-${index}`}
              id={`tab-${index}`}
              onClick={() => setActive(index)}
              className={
                selected
                  ? "-mb-px border-b-2 border-blue-600 px-4 py-2 text-sm font-medium text-blue-600 transition-colors hover:text-blue-700 dark:hover:text-blue-500"
                  : "-mb-px border-b-2 border-transparent px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200"
              }
            >
              {tab.label}
            </button>
          );
        })}
      </div>

      <div
        role="tabpanel"
        id={`tabpanel-${active}`}
        aria-labelledby={`tab-${active}`}
        className="mt-4"
      >
        <p className="text-gray-700 dark:text-gray-200">{TABS[active].body}</p>
      </div>
    </div>
  );
}