Avatar based card checkbox

<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Checkbox } from "@/components/ui/checkbox"
import { FieldGroup, FieldLabel, FieldTitle, Field } from "@/components/ui/field"
</script>

<template>
  <FieldGroup class="w-full max-w-xs">
    <FieldLabel class="relative p-0">
      <Field orientation="horizontal">
        <FieldTitle class="flex items-center gap-2">
          <Avatar>
            <AvatarImage
              src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs="
              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>
        <Checkbox :default-value="true" />
      </Field>
    </FieldLabel>
  </FieldGroup>
</template>