114 lines
4.3 KiB
TypeScript
114 lines
4.3 KiB
TypeScript
import React, { useState, useCallback, useRef } from 'react';
|
|
import { FileIcon, XIcon, UploadIcon } from './Icons';
|
|
|
|
interface FileUploadProps {
|
|
onFileChange: (file: File | null) => void;
|
|
}
|
|
|
|
export const FileUpload: React.FC<FileUploadProps> = ({ onFileChange }) => {
|
|
const [fileName, setFileName] = useState<string | null>(null);
|
|
const [isDragOver, setIsDragOver] = useState(false);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const handleFileSelect = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = event.target.files?.[0];
|
|
if (file) {
|
|
setFileName(file.name);
|
|
onFileChange(file);
|
|
}
|
|
}, [onFileChange]);
|
|
|
|
const handleRemoveFile = useCallback((e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
setFileName(null);
|
|
onFileChange(null);
|
|
if (fileInputRef.current) {
|
|
fileInputRef.current.value = "";
|
|
}
|
|
}, [onFileChange]);
|
|
|
|
const onDragOver = useCallback((e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
setIsDragOver(true);
|
|
}, []);
|
|
|
|
const onDragLeave = useCallback((e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
setIsDragOver(false);
|
|
}, []);
|
|
|
|
const onDrop = useCallback((e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
setIsDragOver(false);
|
|
const file = e.dataTransfer.files?.[0];
|
|
if (file) {
|
|
setFileName(file.name);
|
|
onFileChange(file);
|
|
}
|
|
}, [onFileChange]);
|
|
|
|
return (
|
|
<div className="w-full">
|
|
{!fileName ? (
|
|
<label
|
|
htmlFor="file-upload"
|
|
onDragOver={onDragOver}
|
|
onDragLeave={onDragLeave}
|
|
onDrop={onDrop}
|
|
className={`
|
|
group relative flex flex-col items-center justify-center w-full h-64
|
|
rounded-2xl border-2 border-dashed cursor-pointer transition-all duration-300
|
|
${isDragOver
|
|
? 'border-blue-500 bg-blue-50/50 dark:bg-blue-900/20 scale-[0.99]'
|
|
: 'border-slate-300 dark:border-slate-600 hover:border-blue-400 dark:hover:border-blue-500 hover:bg-slate-50/50 dark:hover:bg-slate-800/50'
|
|
}
|
|
`}
|
|
>
|
|
<div className="flex flex-col items-center justify-center pt-5 pb-6 text-center">
|
|
<div className={`
|
|
p-4 rounded-full mb-4 transition-transform duration-300 group-hover:scale-110
|
|
${isDragOver ? 'bg-blue-100 text-blue-600' : 'bg-slate-100 dark:bg-slate-700 text-slate-500 dark:text-slate-400 group-hover:bg-blue-50 group-hover:text-blue-500 dark:group-hover:bg-slate-700'}
|
|
`}>
|
|
<UploadIcon className="w-8 h-8" />
|
|
</div>
|
|
<p className="mb-2 text-lg font-medium text-slate-700 dark:text-slate-200">
|
|
Clique ou arraste seu arquivo aqui
|
|
</p>
|
|
<p className="text-sm text-slate-500 dark:text-slate-400">
|
|
PDF, JPG ou PNG (máx. 10MB)
|
|
</p>
|
|
</div>
|
|
<input
|
|
ref={fileInputRef}
|
|
id="file-upload"
|
|
name="file-upload"
|
|
type="file"
|
|
className="hidden"
|
|
onChange={handleFileSelect}
|
|
accept="image/*,application/pdf"
|
|
/>
|
|
</label>
|
|
) : (
|
|
<div className="group relative w-full p-4 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md transition-all flex items-center justify-between animate-fade-in">
|
|
<div className="flex items-center gap-4 overflow-hidden">
|
|
<div className="p-3 bg-blue-50 dark:bg-blue-900/30 rounded-lg text-blue-600 dark:text-blue-400">
|
|
<FileIcon className="w-6 h-6" />
|
|
</div>
|
|
<div className="flex flex-col min-w-0">
|
|
<span className="text-sm font-semibold text-slate-700 dark:text-slate-200 truncate pr-4">{fileName}</span>
|
|
<span className="text-xs text-green-600 dark:text-green-400 font-medium">Pronto para análise</span>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={handleRemoveFile}
|
|
className="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-full transition-all"
|
|
title="Remover arquivo"
|
|
>
|
|
<XIcon className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}; |