Orders table with customer info and payment status

<!--
  Сетевые изображения (unsplash) заменены локальным 1x1 data-URI (`PIXEL`,
  та же константа что в блоках `avatar`/`badge`) — см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { Badge } from "@/components/reui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

const PIXEL = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAUwAOw=="

const orders = [
  { id: "#3210", customer: "Olivia Martin", email: "olivia@example.com", avatar: PIXEL, amount: "$1,999.00", status: "Paid", statusVariant: "success" as const, date: "Feb 1, 2025" },
  { id: "#3209", customer: "Jackson Lee", email: "jackson@example.com", avatar: PIXEL, amount: "$39.00", status: "Pending", statusVariant: "warning" as const, date: "Jan 28, 2025" },
  { id: "#3208", customer: "Isabella Nguyen", email: "isabella@example.com", avatar: PIXEL, amount: "$299.00", status: "Paid", statusVariant: "success" as const, date: "Jan 25, 2025" },
  { id: "#3207", customer: "William Kim", email: "will@example.com", avatar: PIXEL, amount: "$99.00", status: "Refunded", statusVariant: "destructive-light" as const, date: "Jan 22, 2025" },
  { id: "#3206", customer: "Sofia Davis", email: "sofia@example.com", avatar: PIXEL, amount: "$2,500.00", status: "Paid", statusVariant: "success" as const, date: "Jan 18, 2025" },
]

function initials(name: string) {
  return name.split(" ").map((n) => n[0]).join("")
}
</script>

<template>
  <div class="mx-auto flex w-full max-w-2xl flex-col">
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Order</TableHead>
          <TableHead>Customer</TableHead>
          <TableHead>Status</TableHead>
          <TableHead class="text-right">Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow v-for="order in orders" :key="order.id">
          <TableCell class="font-mono text-sm">{{ order.id }}</TableCell>
          <TableCell>
            <div class="flex items-center gap-3">
              <Avatar size="sm">
                <AvatarImage :src="order.avatar" :alt="order.customer" />
                <AvatarFallback>{{ initials(order.customer) }}</AvatarFallback>
              </Avatar>
              <div class="flex flex-col">
                <span class="text-sm font-medium">{{ order.customer }}</span>
                <span class="text-muted-foreground text-xs">{{ order.date }}</span>
              </div>
            </div>
          </TableCell>
          <TableCell>
            <Badge :variant="order.statusVariant" size="sm">{{ order.status }}</Badge>
          </TableCell>
          <TableCell class="text-right text-sm font-medium">{{ order.amount }}</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </div>
</template>