Product inventory table with stock badges and prices

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "package", "ellipsis" он же "more-horizontal") —
  см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { Badge } from "@/components/reui/badge"
import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

const products = [
  { name: "Ergonomic Desk Chair", sku: "FRN-001", category: "Furniture", price: "$549.00", stock: 124, stockStatus: "In Stock", stockVariant: "success-light" as const },
  { name: "Wireless Noise-Canceling Headphones", sku: "AUD-042", category: "Audio", price: "$349.99", stock: 8, stockStatus: "Low Stock", stockVariant: "warning-light" as const },
  { name: '4K Ultra HD Monitor 32"', sku: "DSP-019", category: "Displays", price: "$799.00", stock: 0, stockStatus: "Out of Stock", stockVariant: "destructive-light" as const },
  { name: "Mechanical Keyboard RGB", sku: "INP-087", category: "Input", price: "$179.99", stock: 56, stockStatus: "In Stock", stockVariant: "success-light" as const },
  { name: "USB-C Docking Station", sku: "ACC-033", category: "Accessories", price: "$249.00", stock: 3, stockStatus: "Low Stock", stockVariant: "warning-light" as const },
]
</script>

<template>
  <div class="mx-auto flex w-full max-w-2xl flex-col">
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Product</TableHead>
          <TableHead>Category</TableHead>
          <TableHead>Stock</TableHead>
          <TableHead class="text-right">Price</TableHead>
          <TableHead class="w-10" />
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow v-for="product in products" :key="product.sku">
          <TableCell>
            <div class="flex items-center gap-3">
              <div class="bg-muted rounded-sm flex size-9 shrink-0 items-center justify-center">
                <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" aria-hidden="true" class="lucide lucide-package text-muted-foreground size-4">
                  <path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z" />
                  <path d="M12 22V12" />
                  <polyline points="3.29 7 12 12 20.71 7" />
                  <path d="m7.5 4.27 9 5.15" />
                </svg>
              </div>
              <div class="flex flex-col">
                <span class="text-sm font-medium">{{ product.name }}</span>
                <span class="text-muted-foreground tru font-mono text-xs">{{ product.sku }}</span>
              </div>
            </div>
          </TableCell>
          <TableCell class="text-muted-foreground text-sm">{{ product.category }}</TableCell>
          <TableCell>
            <div class="flex items-center gap-2">
              <Badge :variant="product.stockVariant" size="sm">{{ product.stockStatus }}</Badge>
              <span class="text-muted-foreground text-xs">({{ product.stock }})</span>
            </div>
          </TableCell>
          <TableCell class="text-right text-sm font-medium">{{ product.price }}</TableCell>
          <TableCell>
            <DropdownMenu>
              <DropdownMenuTrigger as-child>
                <Button variant="ghost" size="icon" class="size-8">
                  <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" aria-hidden="true" class="lucide lucide-ellipsis">
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                    <circle cx="5" cy="12" r="1" />
                  </svg>
                  <span class="sr-only">Open menu</span>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem>Edit</DropdownMenuItem>
                <DropdownMenuItem>Restock</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem variant="destructive">Archive</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </div>
</template>