File items with icon media, size, and actions

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

<template>
  <div class="mx-auto flex w-full max-w-md flex-col gap-2">
    <Item variant="outline" size="xs">
      <ItemMedia variant="icon">
        <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"
        >
          <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" />
          <path d="M10 9H8" />
          <path d="M16 13H8" />
          <path d="M16 17H8" />
        </svg>
      </ItemMedia>
      <ItemContent>
        <ItemTitle>Quarterly Report.pdf</ItemTitle>
        <ItemDescription>2.4 MB &middot; Updated 2 hours ago</ItemDescription>
      </ItemContent>
      <ItemActions>
        <Badge variant="success-light" size="sm">
          Final
        </Badge>
        <Button variant="outline" size="sm" class="ml-2">
          Open
        </Button>
      </ItemActions>
    </Item>
    <Item variant="outline" size="xs">
      <ItemMedia variant="icon">
        <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"
        >
          <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" />
          <path d="M8 13h2" />
          <path d="M14 13h2" />
          <path d="M8 17h2" />
          <path d="M14 17h2" />
        </svg>
      </ItemMedia>
      <ItemContent>
        <ItemTitle>Budget 2025.xlsx</ItemTitle>
        <ItemDescription>856 KB &middot; Updated yesterday</ItemDescription>
      </ItemContent>
      <ItemActions>
        <Badge variant="warning-light" size="sm">
          Draft
        </Badge>
        <Button variant="outline" size="sm" class="ml-2">
          Open
        </Button>
      </ItemActions>
    </Item>
    <Item variant="outline" size="xs">
      <ItemMedia variant="icon">
        <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"
        >
          <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
          <circle cx="9" cy="9" r="2" />
          <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
        </svg>
      </ItemMedia>
      <ItemContent>
        <ItemTitle>Hero Banner.png</ItemTitle>
        <ItemDescription>4.1 MB &middot; Updated 3 days ago</ItemDescription>
      </ItemContent>
      <ItemActions>
        <Badge variant="info-light" size="sm">
          Review
        </Badge>
        <Button variant="outline" size="sm" class="ml-2">
          Open
        </Button>
      </ItemActions>
    </Item>
  </div>
</template>