User item with avatar, info, and follow button

<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "@/components/ui/item"

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

<template>
  <div class="mx-auto flex w-full max-w-md flex-col gap-2">
    <Item variant="outline" size="xs">
      <ItemMedia>
        <Avatar>
          <AvatarImage
            :src="PIXEL"
            alt="Alex Johnson"
          />
          <AvatarFallback>AJ</AvatarFallback>
        </Avatar>
      </ItemMedia>
      <ItemContent>
        <ItemTitle>Alex Johnson</ItemTitle>
        <ItemDescription>Senior Software Engineer</ItemDescription>
      </ItemContent>
      <ItemActions>
        <Button variant="outline" size="sm">
          Follow
        </Button>
      </ItemActions>
    </Item>
    <Item variant="outline" size="xs">
      <ItemMedia>
        <Avatar>
          <AvatarImage
            :src="PIXEL"
            alt="Sarah Chen"
          />
          <AvatarFallback>SC</AvatarFallback>
        </Avatar>
      </ItemMedia>
      <ItemContent>
        <ItemTitle>Sarah Chen</ItemTitle>
        <ItemDescription>Product Designer</ItemDescription>
      </ItemContent>
      <ItemActions>
        <Button size="sm">Following</Button>
      </ItemActions>
    </Item>
  </div>
</template>