File List Columns

"use client"

import * as React from "react"

import type { FileNode } from "@/registry/macos/lib/file-tree"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { FileListColumns } from "@/components/ui/file-list-columns"

// The same JSON as the File List Table demo: folders have children.
const initialFiles: FileNode[] = [
  {
    name: "Design",
    modified: "Today at 09:41",
    children: [
      { name: "Icons.sketch", kind: "Sketch Document", modified: "Today at 09:41", size: "18,2 MB" },
      { name: "Wallpaper.heic", kind: "HEIF Image", modified: "Today at 09:12", size: "4,1 MB" },
    ],
  },
  {
    name: "Invoices",
    modified: "Yesterday at 17:02",
    children: [
      {
        name: "2026",
        modified: "Yesterday at 17:02",
        children: [
          { name: "September.pdf", kind: "PDF Document", modified: "1. Oct 2026 at 08:30", size: "212 KB" },
          { name: "October.pdf", kind: "PDF Document", created: "Yesterday at 16:58", modified: "Yesterday at 17:02", size: "198 KB" },
        ],
      },
    ],
  },
  { name: "Notes.txt", kind: "Plain Text", modified: "12. Oct 2026 at 12:29", size: "4 KB" },
  { name: "Roadmap.key", kind: "Keynote", modified: "8. Oct 2026 at 10:15", size: "2,4 MB" },
]

// Click a folder to open it in the next column, or use the arrow keys; a
// selected file shows its preview after the last column.
// Drag over items to select several, drag selected items onto a folder or
// into another column to move them, press ⌘⌫ to delete them, and
// double-click a file to open it in a window.
export default function FileListColumnsDemo() {
  const [files, setFiles] = React.useState(initialFiles)
  const [opened, setOpened] = React.useState<FileNode | null>(null)

  return (
    <div className="flex h-[480px] w-full max-w-3xl overflow-hidden rounded-[12px] bg-mac-content shadow-[0_0_0_1px_var(--mac-grid)]">
      <FileListColumns
        files={files}
        onFilesChange={setFiles}
        onOpen={setOpened}
        defaultSelected={["Invoices/2026/October.pdf"]}
        columnWidth={180}
        className="flex-1"
      />
      <Dialog open={opened !== null} onOpenChange={(open) => !open && setOpened(null)}>
        <DialogContent className="sm:max-w-xs">
          <DialogHeader>
            <DialogTitle>{opened?.name}</DialogTitle>
            <DialogDescription>
              {[opened?.kind, opened?.size].filter(Boolean).join(" - ")}
            </DialogDescription>
          </DialogHeader>
        </DialogContent>
      </Dialog>
    </div>
  )
}