Tabs

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@araf-ds/core"

export default function Example() {
  return (
    <Tabs defaultValue="overview">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="analytics">Analytics</TabsTrigger>
        <TabsTrigger value="reports">Reports</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">Overview content here.</TabsContent>
      <TabsContent value="analytics">Analytics content here.</TabsContent>
      <TabsContent value="reports">Reports content here.</TabsContent>
    </Tabs>
  )
}

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
    <TabsTrigger value="reports">Reports</TabsTrigger>
    <TabsTrigger value="settings" disabled>Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview content here.</TabsContent>
  <TabsContent value="analytics">Analytics content here.</TabsContent>
  <TabsContent value="reports">Reports content here.</TabsContent>
</Tabs>

<Tabs defaultValue="all" variant="pill">
  <TabsList>
    <TabsTrigger value="all">All</TabsTrigger>
    <TabsTrigger value="active">Active</TabsTrigger>
    <TabsTrigger value="archived">Archived</TabsTrigger>
  </TabsList>
  <TabsContent value="all">All items</TabsContent>
  <TabsContent value="active">Active items</TabsContent>
  <TabsContent value="archived">Archived items</TabsContent>
</Tabs>

<Tabs defaultValue="profile">
  <TabsList>
    <TabsTrigger value="profile" icon={<UserIcon size={16} />}>Profile</TabsTrigger>
    <TabsTrigger value="security" icon={<ShieldIcon size={16} />}>Security</TabsTrigger>
    <TabsTrigger value="billing" icon={<CreditCardIcon size={16} />}>Billing</TabsTrigger>
  </TabsList>
</Tabs>