"use client"; import * as React from "react"; import { cn } from "@kineticui/core"; import { Breadcrumb } from "./breadcrumb"; import { Button } from "./button"; import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger } from "./context-menu"; import { FileDropzone } from "./file-dropzone"; import { Progress } from "./progress"; import { SegmentedControl } from "./tabs"; import { TreeView } from "./tree-view"; import { toast } from "./toast"; import { DownloadIcon, EditIcon, FileIcon, FolderIcon, ImageIcon, ShareIcon, TrashIcon, UploadIcon, VideoIcon } from "@kineticui/icons"; type Item = { id: string; name: string; kind: "folder" | "image" | "video" | "doc"; size: string; modified: string }; const items: Item[] = [ { id: "1", name: "Brand assets", kind: "folder", size: "24 items", modified: "Today" }, { id: "2", name: "Launch video", kind: "folder", size: "6 items", modified: "Yesterday" }, { id: "3", name: "hero-shot.png", kind: "image", size: "2.4 MB", modified: "Today" }, { id: "4", name: "teaser.mp4", kind: "video", size: "48 MB", modified: "Nov 12" }, { id: "5", name: "press-kit.pdf", kind: "doc", size: "8.1 MB", modified: "Nov 10" }, { id: "6", name: "palette.png", kind: "image", size: "640 KB", modified: "Nov 9" }, { id: "7", name: "roadmap.pdf", kind: "doc", size: "1.2 MB", modified: "Nov 2" }, ]; const icon = { folder: , image: , video: , doc: }; const tint = { folder: "text-accent bg-accent-soft", image: "text-[#7C8CFF] bg-[#7C8CFF]/15", video: "text-[#F0A3D0] bg-[#F0A3D0]/15", doc: "text-[#F4A86A] bg-[#F4A86A]/15" }; /** Drive-style file browser: folder tree, breadcrumb, grid/list views, right-click actions, drop-to-upload and storage meter. */ export function FileManager() { const [view, setView] = React.useState("grid"); const [sel, setSel] = React.useState("3"); const [uploading, setUploading] = React.useState(false); const menu = (it: Item, child: React.ReactNode) => ( {child} toast(`Sharing ${it.name}`)}> Share Download Rename toast(`Moved ${it.name} to trash`)}> Delete ); return (

{uploading ? ( toast(`${f.length} file(s) uploading`)} /> ) : null} {view === "grid" ? (

{items.map((it) => menu( it, , ), )}

) : (

{items.map((it) => menu( it, , ), )}

)}

Right-click a file for actions. Double-click to open.

); }

File Manager

Installation