Small-size items with badges

<script setup lang="ts">
import { Badge } from "@/components/reui/badge"
import { Item, ItemActions, ItemContent, ItemMedia, ItemTitle } from "@/components/ui/item"

const menuItems = [
  { icon: "inbox", label: "Inbox", count: 12 },
  { icon: "send", label: "Sent", count: 0 },
  { icon: "file", label: "Drafts", count: 3 },
  { icon: "archive", label: "Archive", count: 0 },
  { icon: "trash-2", label: "Trash", count: 0 },
] as const
</script>

<template>
  <div class="mx-auto flex w-full max-w-64 flex-col gap-0.5">
    <Item v-for="item in menuItems" :key="item.label" size="xs" as-child>
      <a href="#">
        <ItemMedia variant="icon">
          <svg
            v-if="item.icon === 'inbox'"
            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"
          >
            <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
            <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
          </svg>
          <svg
            v-else-if="item.icon === 'send'"
            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"
          >
            <path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" />
            <path d="m21.854 2.147-10.94 10.939" />
          </svg>
          <svg
            v-else-if="item.icon === 'file'"
            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"
          >
            <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
            <path d="M14 2v4a2 2 0 0 0 2 2h4" />
          </svg>
          <svg
            v-else-if="item.icon === 'archive'"
            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"
          >
            <rect width="20" height="5" x="2" y="3" rx="1" />
            <path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" />
            <path d="M10 12h4" />
          </svg>
          <svg
            v-else
            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"
          >
            <path d="M10 11v6" />
            <path d="M14 11v6" />
            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
            <path d="M3 6h18" />
            <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
          </svg>
        </ItemMedia>
        <ItemContent>
          <ItemTitle>{{ item.label }}</ItemTitle>
        </ItemContent>
        <ItemActions v-if="item.count > 1">
          <Badge
            variant="success-light"
            class="rounded-full"
            size="xs"
          >
            {{ item.count }}
          </Badge>
        </ItemActions>
      </a>
    </Item>
  </div>
</template>