import { useState, useCallback } from "react"; interface FileItem { name: string; size: string; progress: number; } export default function FileUploadDropzone() { const [dragging, setDragging] = useState(false); const [files, setFiles] = useState([ { name: "hero-component.tsx", size: "4.2 KB", progress: 100 }, { name: "screenshot.png", size: "1.8 MB", progress: 100 }, ]); const handleDrop = useCallback((e: React.DragEvent) => { e.preventDefault(); setDragging(false); // Simulate adding a file setFiles((prev) => [...prev, { name: "new-upload.tsx", size: "2.1 KB", progress: 65 }]); }, []); return (

{/* Drop area */}

{ e.preventDefault(); setDragging(true); }} onDragLeave={() => setDragging(false)} onDrop={handleDrop} className={`flex flex-col items-center justify-center rounded-xl border-2 border-dashed px-6 py-12 transition-colors ${ dragging ? "border-orange-500 bg-orange-500/5" : "border-zinc-700 bg-[#111113] hover:border-zinc-600" }`} >

Drop files here

or click to browse

TSX, VUE, SVELTE, HTML up to 500KB

{/* File list */} {files.length > 0 && (

{files.map((file, i) => (

{file.name}

{file.size}

))}

)}

); }

File Uploads Components

File Upload Dropzone