File size: 4,082 Bytes
3318ac7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | "use client";
import { useRef, useState } from "react";
import { Upload, X } from "lucide-react";
import { cn } from "@/lib/utils";
interface UploadZoneProps {
file: File | null;
onFileSelect: (file: File) => void;
onFileRemove: () => void;
isDragging: boolean;
onDragEnter: () => void;
onDragLeave: () => void;
isDisabled?: boolean;
}
export function UploadZone({
file,
onFileSelect,
onFileRemove,
isDragging,
onDragEnter,
onDragLeave,
isDisabled,
}: UploadZoneProps) {
const inputRef = useRef<HTMLInputElement>(null);
const handleDragOver = (e: React.DragEvent) => {
e.preventDefault();
};
const handleDrop = (e: React.DragEvent) => {
e.preventDefault();
onDragLeave();
const droppedFile = e.dataTransfer.files?.[0];
if (droppedFile) {
onFileSelect(droppedFile);
}
};
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const selectedFile = e.currentTarget.files?.[0];
if (selectedFile) {
onFileSelect(selectedFile);
}
};
const handleClick = () => {
if (!isDisabled) {
inputRef.current?.click();
}
};
if (file) {
return (
<div className="border border-blue-500/30 rounded-xl p-5 bg-gradient-to-r from-blue-950/30 to-cyan-950/30 backdrop-blur-sm transition-all duration-300">
<div className="flex items-center justify-between gap-4">
<div className="flex items-center gap-3 flex-1">
<div className="p-3 rounded-lg bg-gradient-to-br from-blue-500/20 to-cyan-500/20 border border-blue-500/40 transition-all duration-300">
<Upload className="w-5 h-5 text-blue-300" />
</div>
<div className="min-w-0 flex-1">
<p className="text-sm font-semibold text-blue-100 truncate">{file.name}</p>
<p className="text-xs text-blue-400/70">{(file.size / 1024).toFixed(2)} KB</p>
</div>
</div>
<button
onClick={onFileRemove}
disabled={isDisabled}
className="p-2 hover:bg-red-500/20 rounded-lg transition-all duration-300 disabled:opacity-50 hover:scale-110 active:scale-95"
type="button"
>
<X className="w-4 h-4 text-red-400" />
</button>
</div>
</div>
);
}
return (
<div
onDragOver={handleDragOver}
onDrop={handleDrop}
onDragEnter={onDragEnter}
onDragLeave={onDragLeave}
onClick={handleClick}
className={cn(
"relative border-2 border-dashed rounded-2xl p-12 transition-all duration-300 cursor-pointer",
isDragging
? "border-blue-400 bg-blue-950/40 scale-105"
: "border-slate-600 hover:border-slate-500 bg-slate-950/40 hover:bg-slate-950/60 hover:scale-102",
isDisabled && "opacity-50 cursor-not-allowed"
)}
>
<input
ref={inputRef}
type="file"
accept=".step,.stp"
onChange={handleInputChange}
disabled={isDisabled}
className="hidden"
/>
<div className="flex flex-col items-center justify-center gap-4 text-center">
<div className="p-4 rounded-xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 border border-blue-500/30">
<Upload className="w-8 h-8 text-blue-400" />
</div>
<div>
<p className="text-base font-semibold text-slate-100">Drag & Drop CAD Files Here</p>
<p className="text-sm text-slate-400 mt-1">Supported: STEP, STP (Max 50MB)</p>
</div>
<button
type="button"
disabled={isDisabled}
className={cn(
"px-6 py-2.5 text-sm font-semibold rounded-lg transition-all duration-300",
isDisabled
? "bg-slate-700 text-slate-400 cursor-not-allowed"
: "bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-700 hover:to-cyan-600 text-white shadow-lg hover:shadow-blue-500/50 active:scale-95 hover:scale-105"
)}
>
Select Files
</button>
</div>
</div>
);
}
|