Activity feed items with avatars and actions

<script setup lang="ts">
import { Badge } from "@/components/reui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle } from "@/components/ui/item"

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

const activities = [
  {
    name: "Sarah Chen",
    action: "deployed",
    target: "v2.4.1 to production",
    badge: "success-light" as const,
    time: "5 min ago",
  },
  {
    name: "Marcus Johnson",
    action: "merged",
    target: "feat/dark-mode into main",
    badge: "info-light" as const,
    time: "32 min ago",
  },
  {
    name: "Emily Park",
    action: "opened",
    target: "issue #284: Fix mobile nav",
    badge: "warning-light" as const,
    time: "1 hour ago",
  },
]
</script>

<template>
  <div class="mx-auto flex w-full max-w-md flex-col">
    <ItemGroup>
      <div v-for="activity in activities" :key="activity.name">
        <Item variant="outline" size="xs">
          <ItemMedia>
            <Avatar size="sm">
              <AvatarImage :src="PIXEL" :alt="activity.name" />
              <AvatarFallback>
                {{ activity.name.split(" ").map((n) => n[0]).join("") }}
              </AvatarFallback>
            </Avatar>
          </ItemMedia>
          <ItemContent>
            <ItemTitle>{{ activity.name }}</ItemTitle>
            <ItemDescription><Badge
                :variant="activity.badge"
                size="xs"
                class="mr-1 align-text-top"
              >{{ activity.action }}</Badge>{{ activity.target }}</ItemDescription>
          </ItemContent>
          <ItemActions>
            <span class="text-muted-foreground text-xs whitespace-nowrap">
              {{ activity.time }}
            </span>
          </ItemActions>
        </Item>
      </div>
    </ItemGroup>
  </div>
</template>