Activity log table with user avatars and timestamps

<!--
  Сетевые изображения (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 activities = [
  { user: "Sarah Chen", avatar: PIXEL, action: "Deployed", target: "production", badge: "success" as const, timestamp: "2 minutes ago" },
  { user: "Marcus Johnson", avatar: PIXEL, action: "Merged", target: "feat/auth-flow", badge: "info" as const, timestamp: "15 minutes ago" },
  { user: "Emily Park", avatar: PIXEL, action: "Commented", target: "PR #284", badge: "outline" as const, timestamp: "1 hour ago" },
  { user: "David Kim", avatar: PIXEL, action: "Reverted", target: "hotfix/api-crash", badge: "destructive" as const, timestamp: "3 hours ago" },
  { user: "Sofia Davis", avatar: PIXEL, action: "Created", target: "issue #512", badge: "secondary" as const, timestamp: "5 hours ago" },
]

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>User</TableHead>
              <TableHead>Action</TableHead>
              <TableHead>Target</TableHead>
              <TableHead class="text-right">Time</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow v-for="(activity, index) in activities" :key="index">
              <TableCell>
                <div class="flex items-center gap-3">
                  <Avatar size="sm">
                    <AvatarImage :src="activity.avatar" :alt="activity.user" />
                    <AvatarFallback>{{ initials(activity.user) }}</AvatarFallback>
                  </Avatar>
                  <span class="text-sm font-medium">{{ activity.user }}</span>
                </div>
              </TableCell>
              <TableCell>
                <Badge :variant="activity.badge" size="sm">{{ activity.action }}</Badge>
              </TableCell>
              <TableCell class="font-mono text-sm">{{ activity.target }}</TableCell>
              <TableCell class="text-muted-foreground text-right text-sm">{{ activity.timestamp }}</TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </FramePanel>
    </Frame>
  </div>
</template>