Spaces:
Sleeping
Sleeping
File size: 2,834 Bytes
4d592a4 |
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 |
import React, { useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
import { Upload, FileText, Loader2 } from 'lucide-react';
import { useApp } from '../../context/AppContext';
export const FileUpload: React.FC = () => {
const { state, handleUpload } = useApp();
const onDrop = useCallback(
(acceptedFiles: File[]) => {
const pdfFile = acceptedFiles.find(file => file.type === 'application/pdf');
if (pdfFile) {
handleUpload(pdfFile);
}
},
[handleUpload]
);
const { getRootProps, getInputProps, isDragActive } = useDropzone({
onDrop,
accept: {
'application/pdf': ['.pdf'],
},
maxFiles: 1,
});
return (
<div className="space-y-4">
<h3 className="text-sm font-semibold text-gray-900 dark:text-white uppercase tracking-wide">
Upload Documents
</h3>
<div
{...getRootProps()}
className={`
border-2 border-dashed rounded-xl p-6 text-center cursor-pointer transition-all duration-200
${isDragActive
? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20'
: 'border-gray-300 dark:border-gray-600 hover:border-primary-400 hover:bg-gray-50 dark:hover:bg-gray-700/50'
}
`}
>
<input {...getInputProps()} />
{state.isUploading ? (
<div className="flex flex-col items-center gap-2">
<Loader2 className="w-10 h-10 text-primary-500 animate-spin" />
<p className="text-sm text-gray-600 dark:text-gray-400">
Processing... {state.uploadProgress}%
</p>
<div className="w-full max-w-xs bg-gray-200 dark:bg-gray-700 rounded-full h-2">
<div
className="bg-primary-500 h-2 rounded-full transition-all duration-300"
style={{ width: `${state.uploadProgress}%` }}
/>
</div>
</div>
) : isDragActive ? (
<div className="flex flex-col items-center gap-2">
<FileText className="w-10 h-10 text-primary-500" />
<p className="text-sm font-medium text-primary-600 dark:text-primary-400">
Drop your PDF here
</p>
</div>
) : (
<div className="flex flex-col items-center gap-2">
<Upload className="w-10 h-10 text-gray-400" />
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">
Drag & drop a PDF
</p>
<p className="text-xs text-gray-500 dark:text-gray-500">
or click to browse
</p>
</div>
)}
</div>
<p className="text-xs text-gray-500 dark:text-gray-500 text-center">
Supports PDF files up to 10MB
</p>
</div>
);
};
|