Item with header and footer sections

<script setup lang="ts">
import { Badge } from "@/components/reui/badge"
import { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemHeader, ItemTitle } from "@/components/ui/item"
import { Progress } from "@/components/ui/progress"

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

<template>
  <div class="mx-auto flex w-full max-w-xs flex-col gap-3">
    <Item variant="outline">
      <ItemHeader>
        <div class="flex items-center gap-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="text-muted-foreground size-3.5"
            aria-hidden="true"
          >
            <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
          </svg>
          <span class="text-muted-foreground text-xs">Project</span>
        </div>
        <Badge variant="info-light" size="xs">
          In Progress
        </Badge>
      </ItemHeader>
      <ItemContent>
        <ItemTitle>Website Redesign</ItemTitle>
        <ItemDescription>
          Complete overhaul of the marketing site with a focus on conversion
          optimization and modern design patterns.
        </ItemDescription>
      </ItemContent>
      <ItemActions>
        <Button variant="outline" size="sm">
          Open
        </Button>
      </ItemActions>
      <ItemFooter>
        <AvatarGroup>
          <Avatar size="sm">
            <AvatarImage :src="PIXEL" alt="SC" />
            <AvatarFallback>SC</AvatarFallback>
          </Avatar>
          <Avatar size="sm">
            <AvatarImage :src="PIXEL" alt="AJ" />
            <AvatarFallback>AJ</AvatarFallback>
          </Avatar>
          <Avatar size="sm">
            <AvatarImage :src="PIXEL" alt="EP" />
            <AvatarFallback>EP</AvatarFallback>
          </Avatar>
        </AvatarGroup>
        <div class="flex items-center gap-2">
          <Progress :model-value="65" class="w-20" />
          <span class="text-muted-foreground text-xs">65%</span>
        </div>
      </ItemFooter>
    </Item>
  </div>
</template>