Tabs

"use client";

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@waveinno/ui";

export default function TabsDemo() {
  const tabs = (
    <>
      <TabsTrigger value="overview">Overview</TabsTrigger>
      <TabsTrigger value="sessions" count={312}>
        Sessions
      </TabsTrigger>
      <TabsTrigger value="rates">Rates</TabsTrigger>
    </>
  );
  return (
    <div className="space-y-6">
      {(["underline", "pill", "solid", "enclosed"] as const).map((variant) => (
        <div key={variant}>
          <p className="mb-2 text-[11.5px] text-muted">{variant}</p>
          <Tabs defaultValue="sessions" className="max-w-xl">
            <TabsList variant={variant} className={variant === "pill" || variant === "solid" ? "w-fit" : undefined}>
              {tabs}
            </TabsList>
            <TabsContent value="overview" className="pt-3 text-sm text-body">
              Overview content.
            </TabsContent>
            <TabsContent value="sessions" className="pt-3 text-sm text-body">
              312 sessions today.
            </TabsContent>
            <TabsContent value="rates" className="pt-3 text-sm text-body">
              Rates content.
            </TabsContent>
          </Tabs>
        </div>
      ))}
    </div>
  );
}