Tabs

'use client';

import { Button } from '@brika/clay/components/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@brika/clay/components/tabs';
import { useState } from 'react';

/** Controlled tabs, drive the active tab programmatically with `value` and `onValueChange`. */
export default function TabsControlledDemo() {
  const tabs = ['overview', 'activity', 'settings'] as const;
  const [active, setActive] = useState<(typeof tabs)[number]>('overview');

  return (
    <div className="w-full max-w-md space-y-4">
      <div className="flex gap-2">
        {tabs.map((tab) => (
          <Button
            key={tab}
            size="sm"
            variant={active === tab ? 'default' : 'outline'}
            onClick={() => setActive(tab)}
            className="capitalize"
          >
            {tab}
          </Button>
        ))}
      </div>
      <Tabs value={active} onValueChange={(v) => setActive(v as typeof active)}>
        <TabsList>
          {tabs.map((tab) => (
            <TabsTrigger key={tab} value={tab} className="capitalize">
              {tab}
            </TabsTrigger>
          ))}
        </TabsList>
        <TabsContent value="overview" className="mt-4 text-clay-default text-sm">
          Overview panel.
        </TabsContent>
        <TabsContent value="activity" className="mt-4 text-clay-default text-sm">
          Activity panel.
        </TabsContent>
        <TabsContent value="settings" className="mt-4 text-clay-default text-sm">
          Settings panel.
        </TabsContent>
      </Tabs>
    </div>
  );
}

'use client';

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@brika/clay/components/tabs';

/** Line-style variant with an underline indicator instead of a pill. */
export default function TabsLineDemo() {
  return (
    <Tabs defaultValue="overview" className="w-full max-w-md">
      <TabsList variant="line">
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      <TabsContent value="overview" className="mt-4 text-clay-default text-sm">
        <p>Overview content.</p>
      </TabsContent>
      <TabsContent value="activity" className="mt-4 text-clay-default text-sm">
        <p>Activity feed.</p>
      </TabsContent>
      <TabsContent value="settings" className="mt-4 text-clay-default text-sm">
        <p>Settings panel.</p>
      </TabsContent>
    </Tabs>
  );
}

'use client';

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@brika/clay/components/tabs';

/** Vertical orientation, tabs stack on the left and content fills the right. */
export default function TabsVerticalDemo() {
  return (
    <Tabs defaultValue="account" orientation="vertical" className="w-full max-w-md min-h-[160px]">
      <TabsList className="h-fit">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="security">Security</TabsTrigger>
        <TabsTrigger value="billing">Billing</TabsTrigger>
        <TabsTrigger value="notifications">Notifications</TabsTrigger>
      </TabsList>
      <TabsContent value="account" className="text-clay-default text-sm">
        <p>Manage your display name, email, and avatar.</p>
      </TabsContent>
      <TabsContent value="security" className="text-clay-default text-sm">
        <p>Change your password and configure two-factor authentication.</p>
      </TabsContent>
      <TabsContent value="billing" className="text-clay-default text-sm">
        <p>View invoices and update your payment method.</p>
      </TabsContent>
      <TabsContent value="notifications" className="text-clay-default text-sm">
        <p>Choose which events trigger email and push notifications.</p>
      </TabsContent>
    </Tabs>
  );
}

'use client';

import { Badge } from '@brika/clay/components/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@brika/clay/components/tabs';

/** Badge inside a tab trigger, compose freely to show counts or status. */
export default function TabsWithBadgeDemo() {
  return (
    <Tabs defaultValue="inbox" className="w-full max-w-md">
      <TabsList>
        <TabsTrigger value="inbox" className="gap-2">
          Inbox
          <Badge variant="secondary" className="h-4 min-w-4 px-1 text-[10px]">3</Badge>
        </TabsTrigger>
        <TabsTrigger value="sent">Sent</TabsTrigger>
        <TabsTrigger value="drafts" className="gap-2">
          Drafts
          <Badge variant="outline" className="h-4 min-w-4 px-1 text-[10px]">12</Badge>
        </TabsTrigger>
      </TabsList>
      <TabsContent value="inbox" className="mt-4 text-clay-default text-sm">
        <p>3 unread messages.</p>
      </TabsContent>
      <TabsContent value="sent" className="mt-4 text-clay-default text-sm">
        <p>Sent messages.</p>
      </TabsContent>
      <TabsContent value="drafts" className="mt-4 text-clay-default text-sm">
        <p>12 saved drafts.</p>
      </TabsContent>
    </Tabs>
  );
}