Avatar group with icon count and button

<script setup lang="ts">
import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

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

<template>
  <TooltipProvider>
    <div class="flex gap-2">
      <AvatarGroup>
        <Avatar>
          <AvatarImage :src="PIXEL" alt="@leerob" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage :src="PIXEL" alt="@maxleiter" />
          <AvatarFallback>LR</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage :src="PIXEL" alt="emma@example.com" />
          <AvatarFallback>EW</AvatarFallback>
        </Avatar>
        <AvatarGroupCount>+5</AvatarGroupCount>
      </AvatarGroup>
      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline" size="icon" class="rounded-full">
            <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-plus"
              aria-hidden="true"
            ><path d="M5 12h14" /><path d="M12 5v14" /></svg>
          </Button>
        </TooltipTrigger>
        <TooltipContent>Add user</TooltipContent>
      </Tooltip>
    </div>
  </TooltipProvider>
</template>