Breadcrumb items with avatars

<!--
  `github.com/vercel.png`/`github.com/shadcn.png` заменены локальным 1x1
  data-URI (та же PIXEL-константа, что в блоках avatar/badge) — реальный
  сетевой запрос в headless-стенде недетерминирован.
-->
<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"

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

<template>
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink href="#" class="flex items-center gap-2">
          <Avatar class="size-5 rounded-sm">
            <AvatarImage :src="PIXEL" />
            <AvatarFallback>VC</AvatarFallback>
          </Avatar>
          Vercel
        </BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbLink href="#" class="flex items-center gap-2">
          <Avatar class="size-5">
            <AvatarImage :src="PIXEL" />
            <AvatarFallback>CN</AvatarFallback>
          </Avatar>
          @shadcn
        </BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbPage>Projects</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
</template>