Avatar inside an empty state example

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

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

<template>
  <div class="flex flex-col items-center gap-4 text-center">
    <AvatarGroup>
      <Avatar>
        <AvatarImage :src="PIXEL" alt="sarah@example.com" class="grayscale" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage :src="PIXEL" alt="@maxleiter" class="grayscale" />
        <AvatarFallback>LR</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage :src="PIXEL" alt="@evilrabbit" class="grayscale" />
        <AvatarFallback>ER</AvatarFallback>
      </Avatar>
      <AvatarGroupCount aria-label="Add collaborator">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-user-plus"
          aria-hidden="true"
        ><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><line x1="19" x2="19" y1="8" y2="14" /><line x1="22" x2="16" y1="11" y2="11" /></svg>
      </AvatarGroupCount>
    </AvatarGroup>
    <div class="space-y-0.5">
      <h3 class="text-sm font-medium">No active collaborators</h3>
      <p class="text-muted-foreground text-xs">
        Invite teammates to start working together.
      </p>
    </div>
  </div>
</template>