Avatar with a solid background color fallback

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

<template>
  <div class="flex items-center gap-2">
    <Avatar class="after:border-primary">
      <AvatarFallback class="bg-primary text-primary-foreground">
        AB
      </AvatarFallback>
    </Avatar>
    <Avatar class="after:border-destructive">
      <AvatarFallback class="bg-destructive text-white">
        AB
      </AvatarFallback>
    </Avatar>
    <Avatar class="after:border-green-500">
      <AvatarFallback class="bg-green-500 text-white">AB</AvatarFallback>
    </Avatar>
    <Avatar class="after:border-blue-500">
      <AvatarFallback class="bg-blue-500 text-white">CB</AvatarFallback>
    </Avatar>
  </div>
</template>