Tabs with icons.

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "user"/"lock"/"settings") — см. docs/PORTING.md §5.
-->
<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">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
            <circle cx="12" cy="7" r="4" />
          </svg>
          Account
        </TabsTrigger>
        <TabsTrigger value="password">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
          </svg>
          Password
        </TabsTrigger>
        <TabsTrigger value="settings">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />
            <circle cx="12" cy="12" r="3" />
          </svg>
          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="icons-name" class="text-sm">Name</Label>
              <Input id="icons-name" value="Sarah Johnson" class="h-9" />
            </div>
            <div class="space-y-2">
              <Label for="icons-email" class="text-sm">Email</Label>
              <Input id="icons-email" type="email" value="sarah.johnson@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="icons-current" class="text-sm">Current password</Label>
              <Input id="icons-current" type="password" class="h-9" />
            </div>
            <div class="space-y-2">
              <Label for="icons-new" class="text-sm">New password</Label>
              <Input id="icons-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="icons-theme" class="text-sm">Theme</Label>
              <Input id="icons-theme" value="Light" class="h-9" />
            </div>
            <div class="space-y-2">
              <Label for="icons-language" class="text-sm">Language</Label>
              <Input id="icons-language" value="English" class="h-9" />
            </div>
          </CardContent>
          <CardFooter class="pt-3">
            <Button size="sm">Save settings</Button>
          </CardFooter>
        </Card>
      </TabsContent>
    </Tabs>
  </div>
</template>