Avatar group with online status on one

<script setup lang="ts">
import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarGroup,
  AvatarImage,
} from "@/components/ui/avatar"

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

<template>
  <AvatarGroup>
    <Avatar>
      <AvatarImage :src="PIXEL" alt="Sarah Chen" />
      <AvatarFallback>SC</AvatarFallback>
      <AvatarBadge class="bg-success" />
    </Avatar>
    <Avatar>
      <AvatarImage :src="PIXEL" alt="Michael Rodriguez" />
      <AvatarFallback>MR</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage :src="PIXEL" alt="Emma Wilson" />
      <AvatarFallback>EW</AvatarFallback>
    </Avatar>
  </AvatarGroup>
</template>