Avatar group with numerical count

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

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

<template>
  <div class="border-border flex items-center gap-1.5 rounded-full border p-0.5 shadow-sm shadow-black/5">
    <div class="flex -space-x-1.5">
      <Avatar class="border-background size-7 border-2">
        <AvatarImage :src="PIXEL" alt="Alex Johnson" />
        <AvatarFallback>AJ</AvatarFallback>
      </Avatar>
      <Avatar class="border-background size-7 border-2">
        <AvatarImage :src="PIXEL" alt="Sarah Chen" />
        <AvatarFallback>SC</AvatarFallback>
      </Avatar>
      <Avatar class="border-background size-7 border-2">
        <AvatarImage :src="PIXEL" alt="Michael Rodriguez" />
        <AvatarFallback>MR</AvatarFallback>
      </Avatar>
      <Avatar class="border-background size-7 border-2">
        <AvatarImage :src="PIXEL" alt="Emma Wilson" />
        <AvatarFallback>EW</AvatarFallback>
      </Avatar>
    </div>

    <p class="text-muted-foreground me-1.5 text-xs">+3</p>
  </div>
</template>