Basic tabs.

<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
</script>

<template>
  <div class="flex w-full max-w-xs flex-col gap-6">
    <Tabs default-value="account">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        <Card>
          <CardHeader class="pb-3">
            <CardTitle class="text-base">Account</CardTitle>
            <CardDescription class="text-sm">Update your account information.</CardDescription>
          </CardHeader>
          <CardContent class="space-y-4">
            <div class="space-y-2">
              <Label for="name" class="text-sm">Name</Label>
              <Input id="name" value="Sarah Johnson" class="h-9" />
            </div>
            <div class="space-y-2">
              <Label for="username" class="text-sm">Username</Label>
              <Input id="username" value="@sarahj" class="h-9" />
            </div>
          </CardContent>
          <CardFooter class="pt-3">
            <Button size="sm">Save changes</Button>
          </CardFooter>
        </Card>
      </TabsContent>
      <TabsContent value="password">
        <Card>
          <CardHeader class="pb-3">
            <CardTitle class="text-base">Password</CardTitle>
            <CardDescription class="text-sm">Change your password here.</CardDescription>
          </CardHeader>
          <CardContent class="space-y-4">
            <div class="space-y-2">
              <Label for="current" class="text-sm">Current password</Label>
              <Input id="current" type="password" class="h-9" />
            </div>
            <div class="space-y-2">
              <Label for="new" class="text-sm">New password</Label>
              <Input id="new" type="password" class="h-9" />
            </div>
          </CardContent>
          <CardFooter class="pt-3">
            <Button size="sm">Update password</Button>
          </CardFooter>
        </Card>
      </TabsContent>
    </Tabs>
  </div>
</template>