Spaces:
Sleeping
Sleeping
Aissugur Kurganbekov
Claude Opus 4.8 (1M context)
Redesign frontend into a premium dark-first AI workspace
375d687 | import { useRef, useState } from "react"; | |
| import { IconUpload } from "../lib/icons"; | |
| // Premium drag-and-drop upload zone. Validation + states live in the parent; | |
| // this just surfaces the file and the drag affordance. | |
| export default function Upload({ onFile, uploading }) { | |
| const [drag, setDrag] = useState(false); | |
| const inputRef = useRef(null); | |
| function handleFiles(files) { | |
| const file = files?.[0]; | |
| if (file) onFile(file); | |
| } | |
| return ( | |
| <div | |
| className={`upload ${drag ? "drag" : ""}`} | |
| role="button" | |
| tabIndex={0} | |
| onClick={() => inputRef.current?.click()} | |
| onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && inputRef.current?.click()} | |
| onDragOver={(e) => { | |
| e.preventDefault(); | |
| setDrag(true); | |
| }} | |
| onDragLeave={() => setDrag(false)} | |
| onDrop={(e) => { | |
| e.preventDefault(); | |
| setDrag(false); | |
| handleFiles(e.dataTransfer.files); | |
| }} | |
| > | |
| <div className="upload-ico"> | |
| <IconUpload size={22} /> | |
| </div> | |
| <h3>{uploading ? "Processing…" : "Drag & drop a document"}</h3> | |
| <p>or click to browse · PDF or TXT · up to 10 MB</p> | |
| <input | |
| ref={inputRef} | |
| type="file" | |
| accept=".pdf,.txt" | |
| hidden | |
| disabled={uploading} | |
| onChange={(e) => { | |
| handleFiles(e.target.files); | |
| e.target.value = ""; | |
| }} | |
| /> | |
| </div> | |
| ); | |
| } | |