Tabs Subtle

"use client";

import * as React from "react";
import {
  TabsSubtle,
  TabsSubtleItem,
  TabsSubtlePanel,
} from "@/components/ui/tabs-subtle";

const tabs = ["Teamspaces", "Recents", "Favorites", "Shared"];

export default function TabsSubtleDemo() {
  const [selected, setSelected] = React.useState(0);

  return (
    <div className="flex min-h-[240px] w-full items-start justify-center bg-background p-8">
      <div className="flex w-full max-w-md flex-col gap-4">
        <TabsSubtle
          selectedIndex={selected}
          onSelect={setSelected}
          idPrefix="tabs-subtle-demo"
        >
          {tabs.map((label, index) => (
            <TabsSubtleItem key={label} label={label} index={index} />
          ))}
        </TabsSubtle>
        {tabs.map((label, index) => (
          <TabsSubtlePanel
            key={label}
            index={index}
            selectedIndex={selected}
            idPrefix="tabs-subtle-demo"
          >
            <p className="text-muted-foreground px-3 text-[13px]">
              {label} content goes here.
            </p>
          </TabsSubtlePanel>
        ))}
      </div>
    </div>
  );
}