Team members table with avatars, roles, and status

<!--
  Сетевые изображения (unsplash) заменены локальным 1x1 data-URI (`PIXEL`,
  та же константа что в блоках `avatar`/`badge`) — см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { Badge } from "@/components/reui/badge"
import { Frame, FramePanel } from "@/components/reui/frame"
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 members = [
  { name: "Sarah Chen", email: "sarah@example.com", avatar: PIXEL, role: "Admin", roleVariant: "default" as const, status: "Active", statusVariant: "success-light" as const },
  { name: "Marcus Johnson", email: "marcus@example.com", avatar: PIXEL, role: "Developer", roleVariant: "info-light" as const, status: "Active", statusVariant: "success-light" as const },
  { name: "Emily Park", email: "emily@example.com", avatar: PIXEL, role: "Designer", roleVariant: "warning-light" as const, status: "Away", statusVariant: "warning-light" as const },
  { name: "David Kim", email: "david@example.com", avatar: PIXEL, role: "Viewer", roleVariant: "outline" as const, status: "Offline", statusVariant: "outline" as const },
]

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">
    <Frame spacing="xs">
      <FramePanel class="p-0!">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Member</TableHead>
              <TableHead>Role</TableHead>
              <TableHead>Status</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow v-for="member in members" :key="member.email">
              <TableCell>
                <div class="flex items-center gap-3">
                  <Avatar size="sm">
                    <AvatarImage :src="member.avatar" :alt="member.name" />
                    <AvatarFallback>{{ initials(member.name) }}</AvatarFallback>
                  </Avatar>
                  <div class="flex flex-col">
                    <span class="text-sm font-medium">{{ member.name }}</span>
                    <span class="text-muted-foreground text-xs">{{ member.email }}</span>
                  </div>
                </div>
              </TableCell>
              <TableCell>
                <Badge :variant="member.roleVariant" size="sm">{{ member.role }}</Badge>
              </TableCell>
              <TableCell>
                <Badge :variant="member.statusVariant" size="sm">{{ member.status }}</Badge>
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </FramePanel>
    </Frame>
  </div>
</template>