Project folder

import { ProjectFolder } from "@/components/ui/project-folder";

"use client";

import { ProjectFolder } from "@/components/ui/project-folder";

// Hand it file URLs: images render as cover thumbnails, PDFs as their first
// page (react-pdf, loaded on demand — the host must send CORS headers),
// everything else as a type tile (INDD, AI…). Each one cross-fades in from
// its type tile once it paints. Pass `content` instead for a custom tile.
// The demo reads real rows from `files.files` via /api/previous-submissions.
const previews = files.map((f) => ({ id: f.url, src: f.url, name: f.name }));

export function Example() {
  return (
    <ProjectFolder
      title="Merch Apparel"
      updatedAt={submission.submittedAt}
      previews={previews}
      onExpandedChange={(expanded) => {
        // Fires when the overlay opens and again when it finishes closing.
        console.log(expanded ? "opened" : "closed");
      }}
    />
  );
}

ProjectFolder                    (single component — pass everything as props)
├── back wall                    (tilts away on hover/focus)
├── preview fan                  (up to 5 previews, splayed from centre)
│   └── previews[n]              (src → image thumb or type tile; content overrides)
├── front wall                   (title + count + updatedLabel/updatedAt)
├── context menu                 (optional — right-click, t-dropdown)
└── portal → dialog              (rendered into document.body on click)
    ├── backdrop                 (click to dismiss)
    ├── header                   (title, count, close button)
    └── grid                     (2 / 3 / 5 cols — each preview morphs in
                                  from its fanned position via layoutId)