Tabs with icons and line variant

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "folder"/"square-check-big"/"users"/"file-text")
  — см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { Badge } from "@/components/reui/badge"
import { Card, CardContent } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
</script>

<template>
  <div class="flex w-full max-w-lg flex-col gap-6">
    <Tabs default-value="projects" orientation="vertical" class="gap-5">
      <TabsList variant="line" class="w-48 shrink-0">
        <TabsTrigger value="projects" class="justify-start gap-2">
          <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" class="size-4">
            <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
          </svg>
          Projects
          <Badge variant="secondary" size="sm" class="ml-auto">8</Badge>
        </TabsTrigger>
        <TabsTrigger value="tasks" class="justify-start gap-2">
          <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" class="size-4">
            <path d="M21 10.656V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12.344" />
            <path d="m9 11 3 3L22 4" />
          </svg>
          Tasks
          <Badge variant="primary-light" size="sm" class="ml-auto">24</Badge>
        </TabsTrigger>
        <TabsTrigger value="team" class="justify-start gap-2">
          <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" class="size-4">
            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
            <path d="M16 3.128a4 4 0 0 1 0 7.744" />
            <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
            <circle cx="9" cy="7" r="4" />
          </svg>
          Team
        </TabsTrigger>
        <TabsTrigger value="reports" class="justify-start gap-2">
          <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" class="size-4">
            <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
            <path d="M14 2v4a2 2 0 0 0 2 2h4" />
          </svg>
          Reports
        </TabsTrigger>
      </TabsList>
      <TabsContent value="projects">
        <Card>
          <CardContent>
            <h3 class="text-foreground mb-2 font-semibold">Active Projects</h3>
            <p>8 projects are currently in progress across your workspace.</p>
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="tasks">
        <Card>
          <CardContent>
            <h3 class="text-foreground mb-2 font-semibold">Pending Tasks</h3>
            <p>24 tasks need your attention this week.</p>
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="team">
        <Card>
          <CardContent>
            <h3 class="text-foreground mb-2 font-semibold">Team Members</h3>
            <p>Manage your team and their access permissions.</p>
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="reports">
        <Card>
          <CardContent>
            <h3 class="text-foreground mb-2 font-semibold">Reports</h3>
            <p>View generated reports and export data.</p>
          </CardContent>
        </Card>
      </TabsContent>
    </Tabs>
  </div>
</template>