Tabs

// owner: Sona
"use client";

import * as React from "react";

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

export default function TabsExample() {
  const [value, setValue] = React.useState("overview");

  return (
    <Tabs value={value} onValueChange={setValue} className="w-full max-w-xl">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
        <TabsTrigger value="billing">Billing</TabsTrigger>
      </TabsList>
      <TabsContent
        value="overview"
        className="rounded-lg border p-4 text-sm text-muted-foreground"
      >
        Keep track of key metrics, release health, and teammate progress.
      </TabsContent>
      <TabsContent
        value="activity"
        className="rounded-lg border p-4 text-sm text-muted-foreground"
      >
        Aggregated deploys, incidents, and audit events in one place.
      </TabsContent>
      <TabsContent
        value="billing"
        className="rounded-lg border p-4 text-sm text-muted-foreground"
      >
        Manage invoices, seats, and usage-based add-ons.
      </TabsContent>
    </Tabs>
  );
}