Avatar with user details and badge

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

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

<template>
  <div class="flex items-center gap-1.5">
    <Avatar>
      <AvatarImage :src="PIXEL" alt="Alex Johnson" />
      <AvatarFallback>AJ</AvatarFallback>
    </Avatar>

    <div class="flex flex-col">
      <div class="flex items-center gap-1.5">
        <span class="text-sm font-semibold">Alex Johnson</span>
        <Badge variant="default" size="xs">
          Pro
        </Badge>
      </div>
      <span class="text-muted-foreground text-xs">Founder & CEO</span>
    </div>
  </div>
</template>