File size: 2,021 Bytes
b010f1b 56e31ec b010f1b 56e31ec b010f1b |
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 |
// FileUploadPanel Component
import React, { useRef } from 'react';
import { Upload, FileJson, Zap } from 'lucide-react';
interface FileUploadPanelProps {
onUpload: (file: File) => void;
onSampleData: () => void;
loading: boolean;
hasData: boolean;
}
export const FileUploadPanel: React.FC<FileUploadPanelProps> = ({
onUpload,
onSampleData,
loading,
hasData,
}) => {
const fileInputRef = useRef<HTMLInputElement>(null);
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (file) {
onUpload(file);
}
};
const handleClick = () => {
fileInputRef.current?.click();
};
return (
<div className="upload-panel">
<div className="upload-header">
<FileJson size={24} />
<h3>Site Boundary</h3>
</div>
<div className="upload-buttons">
<button
className="btn btn-primary"
onClick={handleClick}
disabled={loading}
>
<Upload size={18} />
{hasData ? 'Replace Boundary' : 'Upload DXF / DWG / GeoJSON'}
</button>
<button
className="btn btn-secondary"
onClick={onSampleData}
disabled={loading}
>
<Zap size={18} />
Use Sample Data
</button>
</div>
<input
ref={fileInputRef}
type="file"
accept=".dxf,.dwg,.geojson,.json"
onChange={handleFileChange}
style={{ display: 'none' }}
/>
{hasData && (
<div className="upload-status">
✅ Boundary loaded
</div>
)}
</div>
);
};
export default FileUploadPanel;
|