Item group with status badges

<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=="
</script>

<template>
  <div class="mx-auto flex w-full max-w-md flex-col">
    <ItemGroup>
      <Item variant="outline" size="xs">
        <ItemMedia>
          <Avatar>
            <AvatarImage
              :src="PIXEL"
              alt="Sarah Chen"
            />
            <AvatarFallback>SC</AvatarFallback>
          </Avatar>
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Sarah Chen</ItemTitle>
          <ItemDescription>Team Lead</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Badge variant="success" size="sm">
            Online
          </Badge>
        </ItemActions>
      </Item>
      <Item variant="outline" size="xs">
        <ItemMedia>
          <Avatar>
            <AvatarImage
              :src="PIXEL"
              alt="Alex Johnson"
            />
            <AvatarFallback>AJ</AvatarFallback>
          </Avatar>
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Alex Johnson</ItemTitle>
          <ItemDescription>Developer</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Badge variant="warning" size="sm">
            Away
          </Badge>
        </ItemActions>
      </Item>
      <Item variant="outline" size="xs">
        <ItemMedia>
          <Avatar>
            <AvatarImage
              :src="PIXEL"
              alt="David Kim"
            />
            <AvatarFallback>DK</AvatarFallback>
          </Avatar>
        </ItemMedia>
        <ItemContent>
          <ItemTitle>David Kim</ItemTitle>
          <ItemDescription>Designer</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Badge variant="outline" size="sm">
            Offline
          </Badge>
        </ItemActions>
      </Item>
    </ItemGroup>
  </div>
</template>