Tabs with line variant.

<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 variant="line" class="mb-3.5 w-full">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
        <TabsTrigger value="settings">Settings</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="underline-name" class="text-sm">Name</Label>
              <Input id="underline-name" value="Alex Chen" class="h-9" />
            </div>
            <div class="space-y-2">
              <Label for="underline-email" class="text-sm">Email</Label>
              <Input id="underline-email" type="email" value="alex.chen@example.com" 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="underline-current" class="text-sm">Current password</Label>
              <Input id="underline-current" type="password" class="h-9" />
            </div>
            <div class="space-y-2">
              <Label for="underline-new" class="text-sm">New password</Label>
              <Input id="underline-new" type="password" class="h-9" />
            </div>
          </CardContent>
          <CardFooter class="pt-3">
            <Button size="sm">Update password</Button>
          </CardFooter>
        </Card>
      </TabsContent>
      <TabsContent value="settings">
        <Card>
          <CardHeader class="pb-3">
            <CardTitle class="text-base">Settings</CardTitle>
            <CardDescription class="text-sm">Manage your preferences.</CardDescription>
          </CardHeader>
          <CardContent class="space-y-4">
            <div class="space-y-2">
              <Label for="underline-theme" class="text-sm">Theme</Label>
              <Input id="underline-theme" value="Light" class="h-9" />
            </div>
            <div class="space-y-2">
              <Label for="underline-language" class="text-sm">Language</Label>
              <Input id="underline-language" value="English" class="h-9" />
            </div>
          </CardContent>
          <CardFooter class="pt-3">
            <Button size="sm">Save settings</Button>
          </CardFooter>
        </Card>
      </TabsContent>
    </Tabs>
  </div>
</template>