Tabs

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function TabsDemo() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account" className="space-y-4 pt-2">
        <div className="grid gap-3">
          <Label htmlFor="tabs-name">Name</Label>
          <Input id="tabs-name" defaultValue="Pedro Duarte" />
        </div>
        <Button>Save changes</Button>
      </TabsContent>
      <TabsContent value="password" className="space-y-4 pt-2">
        <div className="grid gap-3">
          <Label htmlFor="tabs-password">Password</Label>
          <Input id="tabs-password" type="password" />
        </div>
        <Button>Save password</Button>
      </TabsContent>
    </Tabs>
  )
}

import { BarChartIcon, SettingsIcon, UserIcon } from "lucide-react"

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

export default function TabsIconsDemo() {
  return (
    <Tabs defaultValue="overview" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="overview">
          <BarChartIcon />
          Overview
        </TabsTrigger>
        <TabsTrigger value="account">
          <UserIcon />
          Account
        </TabsTrigger>
        <TabsTrigger value="settings">
          <SettingsIcon />
          Settings
        </TabsTrigger>
      </TabsList>
      <TabsContent value="overview" className="text-muted-foreground pt-2 text-sm">
        View your activity at a glance.
      </TabsContent>
      <TabsContent value="account" className="text-muted-foreground pt-2 text-sm">
        Manage your account details.
      </TabsContent>
      <TabsContent value="settings" className="text-muted-foreground pt-2 text-sm">
        Configure your preferences.
      </TabsContent>
    </Tabs>
  )
}

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

export default function TabsDisabledDemo() {
  return (
    <Tabs defaultValue="active" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="active">Active</TabsTrigger>
        <TabsTrigger value="archived">Archived</TabsTrigger>
        <TabsTrigger value="deleted" disabled>
          Deleted
        </TabsTrigger>
      </TabsList>
      <TabsContent value="active" className="text-muted-foreground pt-2 text-sm">
        Items you are currently working on.
      </TabsContent>
      <TabsContent
        value="archived"
        className="text-muted-foreground pt-2 text-sm"
      >
        Items you have archived for later.
      </TabsContent>
    </Tabs>
  )
}