Compact social proof with initials

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

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

<template>
  <Frame>
    <FramePanel class="flex items-center gap-2 p-2!">
      <AvatarGroup>
        <Avatar class="size-7">
          <AvatarImage :src="PIXEL" alt="@shadcn" />
          <AvatarFallback>CH</AvatarFallback>
        </Avatar>
        <Avatar class="size-7">
          <AvatarImage :src="PIXEL" alt="@maxleiter" />
          <AvatarFallback>CH</AvatarFallback>
        </Avatar>
        <Avatar class="size-7">
          <AvatarImage :src="PIXEL" alt="@evilrabbit" />
          <AvatarFallback>CH</AvatarFallback>
        </Avatar>
        <Avatar class="size-7">
          <AvatarImage :src="PIXEL" alt="@leerob" />
          <AvatarFallback>CH</AvatarFallback>
        </Avatar>
      </AvatarGroup>

      <p class="text-muted-foreground me-1.5 text-xs">Joined by <span class="text-foreground font-semibold">500+</span> developers.</p>
    </FramePanel>
  </Frame>
</template>