Tabs

import { Button } from '@immit/ui/button'
import { Input } from '@immit/ui/input'
import { Label } from '@immit/ui/label'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@immit/ui/tabs'
 
export function TabsDemo() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <TabsList className="grid w-full grid-cols-2">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account" className="rounded-lg">
        <div className="bg-default rounded-lg border">
          <div className="flex flex-col space-y-1.5 p-6">
            <h3 className="text-lg font-semibold leading-none tracking-tight">
              Account
            </h3>
            <div className="text-muted text-sm">
              Make changes to your account here. Click save when you are done.
            </div>
          </div>
          <div className="space-y-6 p-6 pt-0">
            <div className="space-y-2">
              <div className="space-y-1">
                <Label htmlFor="name">Name</Label>
                <Input id="name" defaultValue="Pedro Duarte" />
              </div>
              <div className="space-y-1">
                <Label htmlFor="username">Username</Label>
                <Input id="username" defaultValue="@peduarte" />
              </div>
            </div>
            <Button className="w-full">Save changes</Button>
          </div>
        </div>
      </TabsContent>
      <TabsContent value="password" className="rounded-lg">
        <div className="bg-default rounded-lg border">
          <div className="flex flex-col space-y-1.5 p-6">
            <h3 className="text-lg font-semibold leading-none tracking-tight">
              Password
            </h3>
            <div className="text-muted text-sm">
              Change your password here. After saving, you will be logged out.
            </div>
          </div>
          <div className="space-y-6 p-6 pt-0">
            <div className="space-y-2">
              <div className="space-y-1">
                <Label htmlFor="current">Current password</Label>
                <Input id="current" type="password" />
              </div>
              <div className="space-y-1">
                <Label htmlFor="new">New password</Label>
                <Input id="new" type="password" />
              </div>
            </div>
            <Button className="w-full">Save password</Button>
          </div>
        </div>
      </TabsContent>
    </Tabs>
  )
}