File manager table with owners and sharing badges

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "file-text", "folder", "file-spreadsheet", "image",
  "pen-tool") и unsplash-аватары заменены локальным 1x1 data-URI (`PIXEL`) —
  см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { Badge } from "@/components/reui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

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

const files = [
  { name: "Q4 Financial Report.pdf", icon: "file-text" as const, size: "2.4 MB", owner: "Sarah Chen", ownerAvatar: PIXEL, sharing: "Team", sharingVariant: "info-light" as const, modified: "2 hours ago" },
  { name: "Brand Guidelines", icon: "folder" as const, size: "—", owner: "Emily Park", ownerAvatar: PIXEL, sharing: "Public", sharingVariant: "success-light" as const, modified: "1 day ago" },
  { name: "Product Roadmap 2025.xlsx", icon: "file-spreadsheet" as const, size: "856 KB", owner: "Marcus Johnson", ownerAvatar: PIXEL, sharing: "Private", sharingVariant: "outline" as const, modified: "3 days ago" },
  { name: "App Screenshots", icon: "image" as const, size: "48.2 MB", owner: "David Kim", ownerAvatar: PIXEL, sharing: "Team", sharingVariant: "info-light" as const, modified: "1 week ago" },
  { name: "Architecture Diagram.fig", icon: "pen-tool" as const, size: "12.8 MB", owner: "Sofia Davis", ownerAvatar: PIXEL, sharing: "Restricted", sharingVariant: "warning-light" as const, modified: "2 weeks ago" },
]

function initials(name: string) {
  return name.split(" ").map((n) => n[0]).join("")
}
</script>

<template>
  <div class="mx-auto flex w-full max-w-2xl flex-col">
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Owner</TableHead>
          <TableHead>Sharing</TableHead>
          <TableHead>Size</TableHead>
          <TableHead class="text-right">Modified</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow v-for="file in files" :key="file.name">
          <TableCell>
            <div class="flex items-center gap-3">
              <svg v-if="file.icon === 'file-text'" 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="lucide lucide-file-text text-muted-foreground size-4 shrink-0">
                <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>
              <svg v-else-if="file.icon === 'folder'" 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="lucide lucide-folder text-muted-foreground size-4 shrink-0">
                <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>
              <svg v-else-if="file.icon === 'file-spreadsheet'" 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="lucide lucide-file-spreadsheet text-muted-foreground size-4 shrink-0">
                <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>
              <svg v-else-if="file.icon === 'image'" 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="lucide lucide-image text-muted-foreground size-4 shrink-0">
                <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>
              <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" aria-hidden="true" class="lucide lucide-pen-tool text-muted-foreground size-4 shrink-0">
                <path d="M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z" />
                <path d="m18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18" />
                <path d="m2.3 2.3 7.286 7.286" />
                <circle cx="11" cy="11" r="2" />
              </svg>
              <span class="text-sm font-medium">{{ file.name }}</span>
            </div>
          </TableCell>
          <TableCell>
            <div class="flex items-center gap-2">
              <Avatar size="sm">
                <AvatarImage :src="file.ownerAvatar" :alt="file.owner" />
                <AvatarFallback>{{ initials(file.owner) }}</AvatarFallback>
              </Avatar>
              <span class="text-sm">{{ file.owner }}</span>
            </div>
          </TableCell>
          <TableCell>
            <Badge :variant="file.sharingVariant" size="sm">{{ file.sharing }}</Badge>
          </TableCell>
          <TableCell class="text-muted-foreground text-sm">{{ file.size }}</TableCell>
          <TableCell class="text-muted-foreground text-right text-sm">{{ file.modified }}</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </div>
</template>