File upload list with progress & status.

<!--
  Адаптировано (docs/PORTING.md §5): `IconPlaceholder` заменён инлайновым
  `<svg>` (путь lucide "file"), тем же, что и в React-эталоне.
-->
<script setup lang="ts">
import { Item, ItemActions, ItemContent, ItemGroup, ItemMedia, ItemTitle } from "@/components/ui/item"
import { Progress } from "@/components/ui/progress"

const files = [
  { id: "1", name: "document.pdf", progress: 45, status: "2m 30s" },
  { id: "2", name: "presentation.pptx", progress: 78, status: "45s" },
  { id: "3", name: "spreadsheet.xlsx", progress: 12, status: "5m 12s" },
  { id: "4", name: "image.jpg", progress: 100, status: "Complete" },
]
</script>

<template>
  <div class="mx-auto flex w-full max-w-xs flex-col">
    <ItemGroup>
      <Item v-for="file in files" :key="file.id" size="xs" class="px-0">
        <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"
            aria-hidden="true"
            class="text-muted-foreground size-4"
          >
            <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>
        </ItemMedia>
        <ItemContent class="flex-1 truncate">
          <ItemTitle class="cursor-pointer truncate hover:underline">{{ file.name }}</ItemTitle>
        </ItemContent>
        <ItemContent class="w-32">
          <Progress :model-value="file.progress" class="h-1" />
        </ItemContent>
        <ItemActions class="w-20 justify-end">
          <span class="text-foreground">{{ file.status }}</span>
        </ItemActions>
      </Item>
    </ItemGroup>
  </div>
</template>