"use client"; import { useEffect, useRef, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { Check, FileArchive, FileImage, FileText, FileVideo, type LucideIcon, UploadCloud, X, } from "lucide-react"; import { cn } from "@/lib/utils"; const EASE = [0.16, 1, 0.3, 1] as const; export type DropFileKind = "image" | "pdf" | "zip" | "video" | "doc"; export interface DropFile { id: string; name: string; size: string; kind: DropFileKind; /** 0 to 100 */ progress: number; } const KIND_META: Record< DropFileKind, { icon: LucideIcon; tint: string; ring: string } > = { image: { icon: FileImage, tint: "text-sky-300", ring: "bg-sky-400/10" }, pdf: { icon: FileText, tint: "text-rose-300", ring: "bg-rose-400/10" }, zip: { icon: FileArchive, tint: "text-amber-300", ring: "bg-amber-400/10" }, video: { icon: FileVideo, tint: "text-violet-300", ring: "bg-violet-400/10" }, doc: { icon: FileText, tint: "text-zinc-300", ring: "bg-white/5" }, }; function FileChip({ file, onRemove, }: { file: DropFile; onRemove?: (id: string) => void; }) { const meta = KIND_META[file.kind]; const Icon = meta.icon; const pct = Math.max(0, Math.min(100, Math.round(file.progress))); const done = pct >= 100; return (

{file.name} {done ? file.size : `${pct}%`}

{done ? ( ) : ( )} {onRemove && ( )}

); } export function FileDropzone({ files = [], onDropFiles, onRemove, title = "Drop files to upload", hint = "PNG, PDF, MP4 or ZIP up to 200 MB", className, }: { files?: DropFile[]; onDropFiles?: (files: FileList) => void; onRemove?: (id: string) => void; title?: string; hint?: string; className?: string; }) { const zoneRef = useRef(null); const [dragOver, setDragOver] = useState(false); const [size, setSize] = useState({ w: 0, h: 0 }); useEffect(() => { const el = zoneRef.current; if (!el) return; const measure = () => { const r = el.getBoundingClientRect(); setSize({ w: Math.round(r.width), h: Math.round(r.height) }); }; measure(); const ro = new ResizeObserver(measure); ro.observe(el); return () => ro.disconnect(); }, []); const dashW = Math.max(0, size.w - 3); const dashH = Math.max(0, size.h - 3); return (

{ e.preventDefault(); if (!dragOver) setDragOver(true); }} onDragLeave={(e) => { e.preventDefault(); setDragOver(false); }} onDrop={(e) => { e.preventDefault(); setDragOver(false); if (e.dataTransfer.files.length) onDropFiles?.(e.dataTransfer.files); }} className={cn( "relative overflow-hidden rounded-2xl px-6 py-8 transition-colors duration-300", dragOver ? "bg-brand/[0.06]" : "bg-white/[0.015]" )} > {/* soft radial wash that intensifies on drag-over */} {/* animated dashed marching-ants border */}

{title}

{hint}

Browse files

{files.length > 0 && (

{files.map((f) => ( ))}

)}

); } /* ----------------------------- demo ----------------------------- */ const SEED_FILES: DropFile[] = [ { id: "a", name: "brand-guidelines.pdf", size: "8.2 MB", kind: "pdf", progress: 100, }, { id: "b", name: "hero-poster.png", size: "2.4 MB", kind: "image", progress: 46, }, { id: "c", name: "product-reel.mp4", size: "54 MB", kind: "video", progress: 18, }, ]; const SPEED: Record = { b: 7, c: 4 }; export default function Demo() { const [files, setFiles] = useState(SEED_FILES); useEffect(() => { let resetting = false; const id = setInterval(() => { setFiles((prev) => { const allDone = prev.every((f) => f.progress >= 100); if (allDone) { if (!resetting) { resetting = true; window.setTimeout(() => { resetting = false; setFiles((cur) => cur.map((f) => f.id === "a" ? f : { ...f, progress: f.id === "b" ? 24 : 6 } ) ); }, 1700); } return prev; } return prev.map((f) => { if (f.progress >= 100) return f; const step = SPEED[f.id] ?? 5; return { ...f, progress: Math.min(100, f.progress + step) }; }); }); }, 140); return () => clearInterval(id); }, []); return (

{}} />

); }

File Dropzone