Avatar with different badge positions

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

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

<template>
  <div class="flex items-center gap-2">
    <Avatar class="rounded-md relative">
      <AvatarImage :src="PIXEL" alt="Alex Johnson (away)" class="rounded-md" />
      <AvatarFallback>AJ</AvatarFallback>
      <AvatarBadge class="-top-1 -right-1 bg-green-500" />
    </Avatar>
    <Avatar class="rounded-md relative">
      <AvatarImage :src="PIXEL" alt="Sarah Chen" class="rounded-md" />
      <AvatarFallback>SC</AvatarFallback>
      <AvatarBadge class="-right-1 -bottom-1 bg-yellow-500" />
    </Avatar>
    <Avatar class="rounded-md relative">
      <AvatarImage :src="PIXEL" alt="Michael Rodriguez" class="rounded-md" />
      <AvatarFallback>MR</AvatarFallback>
      <AvatarBadge class="bg-destructive -top-1 right-auto bottom-auto -left-1" />
    </Avatar>
    <Avatar class="rounded-md relative">
      <AvatarImage :src="PIXEL" alt="Emma Wilson" class="rounded-md" />
      <AvatarFallback>EW</AvatarFallback>
      <AvatarBadge class="right-auto -bottom-1 -left-1 bg-blue-500" />
    </Avatar>
  </div>
</template>