Tabs

"use client";

import { Tabs, TabsList, TabsPanel, TabsTrigger } from "@/components/ui/tabs";

/**
 * Live Tabs example — a horizontal `role="tablist"` with roving tabindex: `Tab`
 * lands on the selected trigger, arrow keys move between triggers (wrapping),
 * `Home` / `End` jump to the ends. The first group uses automatic activation
 * (arrows move selection immediately — the Version 1 preference); the second
 * uses manual activation (arrows move focus only, `Enter` / `Space` confirms).
 *
 * Each panel opens on plain text with nothing focusable before it, so it keeps
 * the default `tabindex="0"` — a second `Tab` from the trigger lands inside the
 * panel. A panel that began with a link or button would pass `focusable={false}`.
 */
export function TabsShowcase() {
  return (
    <div className="flex flex-col gap-8">
      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Automatic activation
        </h3>
        <Tabs defaultValue="overview">
          <TabsList aria-label="Record sections">
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="activity">Activity</TabsTrigger>
            <TabsTrigger value="settings">Settings</TabsTrigger>
            <TabsTrigger value="archived" disabled>
              Archived
            </TabsTrigger>
          </TabsList>
          <TabsPanel value="overview" className="pt-2 text-sm leading-normal">
            A summary of this record — status, owner, and the three most recent
            changes.
          </TabsPanel>
          <TabsPanel value="activity" className="pt-2 text-sm leading-normal">
            Every event on this record in reverse chronological order.
          </TabsPanel>
          <TabsPanel value="settings" className="pt-2 text-sm leading-normal">
            Visibility, notifications, and who can edit.
          </TabsPanel>
          <TabsPanel value="archived" className="pt-2 text-sm leading-normal">
            Archived items (this trigger is disabled in the example).
          </TabsPanel>
        </Tabs>
      </section>

      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Manual activation
        </h3>
        <Tabs defaultValue="account" activationMode="manual">
          <TabsList aria-label="Preferences">
            <TabsTrigger value="account">Account</TabsTrigger>
            <TabsTrigger value="billing">Billing</TabsTrigger>
            <TabsTrigger value="team">Team</TabsTrigger>
          </TabsList>
          <TabsPanel value="account" className="pt-2 text-sm leading-normal">
            Name, email, and password. Arrow keys move focus here; the panel
            only switches on `Enter` or `Space`.
          </TabsPanel>
          <TabsPanel value="billing" className="pt-2 text-sm leading-normal">
            Plan, payment method, and invoice history.
          </TabsPanel>
          <TabsPanel value="team" className="pt-2 text-sm leading-normal">
            Members, roles, and pending invitations.
          </TabsPanel>
        </Tabs>
      </section>

      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Overflow scrolls horizontally
        </h3>
        <div className="max-w-xs">
          <Tabs defaultValue="mon">
            <TabsList aria-label="Day">
              {[
                ["mon", "Monday"],
                ["tue", "Tuesday"],
                ["wed", "Wednesday"],
                ["thu", "Thursday"],
                ["fri", "Friday"],
              ].map(([value, label]) => (
                <TabsTrigger key={value} value={value}>
                  {label}
                </TabsTrigger>
              ))}
            </TabsList>
            <TabsPanel value="mon" className="pt-2 text-sm leading-normal">
              The tab list scrolls within itself instead of wrapping to a second
              row.
            </TabsPanel>
            {["tue", "wed", "thu", "fri"].map((value) => (
              <TabsPanel
                key={value}
                value={value}
                className="pt-2 text-sm leading-normal"
              >
                {value} panel.
              </TabsPanel>
            ))}
          </Tabs>
        </div>
      </section>
    </div>
  );
}