File List Gallery View

"use client"

import * as React from "react"
import { CircleEllipsisIcon, RotateCcwSquareIcon } from "lucide-react"

import type { FileNode } from "@/registry/macos/lib/file-tree"
import {
  FileListGalleryAction,
  FileListGalleryView,
} from "@/components/ui/file-list-gallery-view"

// `created`, `modified` and the `info` rows fill in the information.
const initialFiles: FileNode[] = [
  {
    name: "Drift Light.webp",
    kind: "WebP Image",
    size: "52 KB",
    thumbnail: "/wallpapers/drift-light.webp",
    created: "27. October 2026 at 09:41",
    modified: "27. October 2026 at 09:41",
    info: { Dimensions: "2560×2560" },
  },
  {
    name: "Drift Dark.webp",
    kind: "WebP Image",
    size: "44 KB",
    thumbnail: "/wallpapers/drift-dark.webp",
    created: "27. October 2026 at 09:42",
    modified: "27. October 2026 at 09:42",
    info: { Dimensions: "2560×2560" },
    tag: "purple",
  },
  { name: "Design", kind: "Folder", modified: "21. October 2026 at 15:42", children: [] },
  { name: "Roadmap.key", kind: "Keynote", size: "2,4 MB", modified: "8. October 2026 at 10:15" },
]

// The arrow keys step through the strip; double-click a folder to go into
// it and ⌘↑ to come back. Drag a thumbnail onto the folder to move it.
export default function FileListGalleryViewDemo() {
  const [files, setFiles] = React.useState(initialFiles)

  return (
    <div className="flex h-[420px] w-full max-w-3xl overflow-hidden rounded-[12px] bg-mac-content shadow-[0_0_0_1px_var(--mac-grid)]">
      <FileListGalleryView
        files={files}
        onFilesChange={setFiles}
        renderActions={(file) => (
          <>
            {file.thumbnail && (
              <FileListGalleryAction>
                <RotateCcwSquareIcon strokeWidth={1.5} />
                Rotate Left
              </FileListGalleryAction>
            )}
            <FileListGalleryAction>
              <CircleEllipsisIcon strokeWidth={1.5} />
              More…
            </FileListGalleryAction>
          </>
        )}
        className="flex-1"
      />
    </div>
  )
}