Avatar with multiple badges

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

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

<template>
  <Avatar class="relative">
    <AvatarImage :src="PIXEL" alt="Alex Johnson" />
    <AvatarFallback>JB</AvatarFallback>
    <AvatarBadge class="bg-green-500" />
    <span class="border-background absolute -top-2 -right-2 flex size-5 items-center justify-center rounded-full border-2 bg-red-500 text-xs font-medium text-white">
      3
    </span>
  </Avatar>
</template>