Avatar based card radio group

<!--
  Расхождение с апстримом: реальные unsplash URL заменены локальным 1x1
  data-URI (`PIXEL`, та же константа что в `block-badge`/`block-card`) —
  реальный сетевой запрос в headless-стенде недетерминирован.
-->
<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Field, FieldLabel, FieldTitle } from "@/components/ui/field"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

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

<template>
  <RadioGroup default-value="emma" class="w-full max-w-xs">
    <FieldLabel for="emma-wilson" class="p-0!">
      <Field orientation="horizontal">
        <FieldTitle class="flex items-center gap-2">
          <Avatar>
            <AvatarImage :src="PIXEL" alt="Emma Wilson" />
            <AvatarFallback>EW</AvatarFallback>
          </Avatar>
          <div class="flex flex-col items-start">
            <span class="text-sm font-semibold">Emma Wilson</span>
            <span class="text-muted-foreground text-xs">@emmawilson</span>
          </div>
        </FieldTitle>
        <RadioGroupItem value="emma" id="emma-wilson" />
      </Field>
    </FieldLabel>
    <FieldLabel for="john-doe" class="p-0!">
      <Field orientation="horizontal">
        <FieldTitle class="flex items-center gap-2">
          <Avatar>
            <AvatarImage :src="PIXEL" alt="John Doe" />
            <AvatarFallback>JD</AvatarFallback>
          </Avatar>
          <div class="flex flex-col items-start">
            <span class="text-sm font-semibold">John Doe</span>
            <span class="text-muted-foreground text-xs">@johndoe</span>
          </div>
        </FieldTitle>
        <RadioGroupItem value="john" id="john-doe" />
      </Field>
    </FieldLabel>
  </RadioGroup>
</template>