| |
| 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; |
|
|
