Tabs

"use client";

import { Bell, Lock, User } from "lucide-react";

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

const tabs = [
  {
    value: "profile",
    icon: User,
    label: "Profile",
    body: "Update your name, photo, and public bio.",
  },
  {
    value: "security",
    icon: Lock,
    label: "Security",
    body: "Manage your password, two-factor authentication, and active sessions.",
  },
  {
    value: "notifications",
    icon: Bell,
    label: "Notifications",
    body: "Choose which updates you want delivered by email or push.",
  },
];

export default function Tabs01() {
  return (
    <Tabs defaultValue="profile" className="w-full max-w-md">
      <TabsList className="w-full">
        {tabs.map((tab) => (
          <TabsTrigger key={tab.value} value={tab.value} className="flex-1">
            <tab.icon className="size-4" aria-hidden="true" />
            {tab.label}
          </TabsTrigger>
        ))}
      </TabsList>
      {tabs.map((tab) => (
        <TabsContent key={tab.value} value={tab.value}>
          <p className="text-sm text-muted-foreground">{tab.body}</p>
        </TabsContent>
      ))}
    </Tabs>
  );
}

"use client";

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

const views = [
  {
    value: "board",
    label: "Board",
    body: "Drag cards between columns to update their status.",
  },
  {
    value: "list",
    label: "List",
    body: "A dense, sortable table of every task in the project.",
  },
  {
    value: "calendar",
    label: "Calendar",
    body: "See tasks laid out by due date across the month.",
  },
];

export default function Tabs02() {
  return (
    <Tabs defaultValue="board" className="w-full max-w-md">
      <TabsList className="w-full">
        {views.map((view) => (
          <TabsTrigger key={view.value} value={view.value} className="flex-1">
            {view.label}
          </TabsTrigger>
        ))}
      </TabsList>
      {views.map((view) => (
        <TabsContent key={view.value} value={view.value}>
          <p className="text-sm text-muted-foreground">{view.body}</p>
        </TabsContent>
      ))}
    </Tabs>
  );
}

"use client";

import { Badge } from "@/registry/base/ui/badge";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/registry/base/ui/tabs";

const folders = [
  {
    value: "inbox",
    label: "Inbox",
    count: 12,
    body: "New messages waiting for a reply.",
  },
  {
    value: "drafts",
    label: "Drafts",
    count: 3,
    body: "Messages you started but haven't sent yet.",
  },
  {
    value: "sent",
    label: "Sent",
    count: 0,
    body: "Everything you've sent, most recent first.",
  },
];

export default function Tabs03() {
  return (
    <Tabs defaultValue="inbox" className="w-full max-w-md">
      <TabsList className="w-full">
        {folders.map((folder) => (
          <TabsTrigger key={folder.value} value={folder.value} className="flex-1">
            {folder.label}
            {folder.count > 0 && (
              <Badge variant="secondary" className="h-4.5 px-1.5">
                {folder.count}
              </Badge>
            )}
          </TabsTrigger>
        ))}
      </TabsList>
      {folders.map((folder) => (
        <TabsContent key={folder.value} value={folder.value}>
          <p className="text-sm text-muted-foreground">{folder.body}</p>
        </TabsContent>
      ))}
    </Tabs>
  );
}

"use client";

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

const sections = [
  {
    value: "general",
    label: "General",
    body: "Workspace name, timezone, and default language.",
  },
  {
    value: "members",
    label: "Members",
    body: "Invite teammates and manage their roles and permissions.",
  },
  {
    value: "billing",
    label: "Billing",
    body: "View invoices, update your payment method, or change plans.",
  },
];

export default function Tabs04() {
  return (
    <Tabs
      defaultValue="general"
      orientation="vertical"
      className="w-full max-w-lg"
    >
      <TabsList className="w-40 shrink-0">
        {sections.map((section) => (
          <TabsTrigger key={section.value} value={section.value}>
            {section.label}
          </TabsTrigger>
        ))}
      </TabsList>
      {sections.map((section) => (
        <TabsContent key={section.value} value={section.value}>
          <p className="text-sm text-muted-foreground">{section.body}</p>
        </TabsContent>
      ))}
    </Tabs>
  );
}