Avatar social proof with text label

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

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

<template>
  <div class="border-border rounded-full flex items-center gap-1.5 border p-1 shadow-sm shadow-black/5">
    <AvatarGroup>
      <Avatar class="size-7">
        <AvatarImage :src="PIXEL" alt="Liam Thompson" />
        <AvatarFallback>LT</AvatarFallback>
      </Avatar>
      <Avatar class="size-7">
        <AvatarImage :src="PIXEL" alt="Nick Johnson" />
        <AvatarFallback>NJ</AvatarFallback>
      </Avatar>
      <Avatar class="size-7">
        <AvatarImage :src="PIXEL" alt="Maria Garcia" />
        <AvatarFallback>MG</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">Trusted by <span class="text-foreground font-semibold">100K+</span> users.</p>
  </div>
</template>