93 lines
3.9 KiB
TypeScript
93 lines
3.9 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { X, Play, Upload, Layers } from 'lucide-react';
|
||
|
|
import { Button } from '../ui/button';
|
||
|
|
import { FilePreviewCard, UploadFile } from './FilePreviewCard';
|
||
|
|
|
||
|
|
interface BulkUploadModalProps {
|
||
|
|
files: UploadFile[];
|
||
|
|
onClose: () => void;
|
||
|
|
onStartUpload: () => void;
|
||
|
|
onCancelFile: (id: string) => void;
|
||
|
|
onPauseFile: (id: string) => void;
|
||
|
|
onResumeFile: (id: string) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const BulkUploadModal: React.FC<BulkUploadModalProps> = ({
|
||
|
|
files,
|
||
|
|
onClose,
|
||
|
|
onStartUpload,
|
||
|
|
onCancelFile,
|
||
|
|
onPauseFile,
|
||
|
|
onResumeFile
|
||
|
|
}) => {
|
||
|
|
const totalProgress = files.reduce((acc, f) => acc + f.progress, 0) / (files.length || 1);
|
||
|
|
const uploadingCount = files.filter(f => f.status === 'uploading').length;
|
||
|
|
const completedCount = files.filter(f => f.status === 'completed').length;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
|
||
|
|
<div className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm" onClick={onClose}></div>
|
||
|
|
<div className="relative w-full max-w-3xl bg-kodo-graphite border border-kodo-steel rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[80vh] animate-scaleIn">
|
||
|
|
|
||
|
|
{/* Header */}
|
||
|
|
<div className="p-6 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
|
||
|
|
<div>
|
||
|
|
<h3 className="font-display font-bold text-xl text-white flex items-center gap-2">
|
||
|
|
<Layers className="w-5 h-5 text-kodo-cyan" /> Bulk Upload Manager
|
||
|
|
</h3>
|
||
|
|
<p className="text-xs text-gray-400 mt-1">
|
||
|
|
{completedCount} / {files.length} files uploaded • {files.length - completedCount} remaining
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<button onClick={onClose} className="text-gray-400 hover:text-white"><X className="w-5 h-5" /></button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Global Progress */}
|
||
|
|
<div className="px-6 py-2 bg-kodo-slate/30 border-b border-kodo-steel">
|
||
|
|
<div className="flex justify-between text-[10px] font-bold text-gray-400 uppercase mb-1">
|
||
|
|
<span>Overall Progress</span>
|
||
|
|
<span>{Math.round(totalProgress)}%</span>
|
||
|
|
</div>
|
||
|
|
<div className="h-1 bg-gray-700 rounded-full overflow-hidden">
|
||
|
|
<div className="h-full bg-gradient-to-r from-kodo-cyan to-kodo-blue-500 transition-all duration-300" style={{width: `${totalProgress}%`}}></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* File List */}
|
||
|
|
<div className="flex-1 overflow-y-auto p-6 space-y-3 bg-kodo-graphite/50">
|
||
|
|
{files.map(file => (
|
||
|
|
<FilePreviewCard
|
||
|
|
key={file.id}
|
||
|
|
fileData={file}
|
||
|
|
onCancel={() => onCancelFile(file.id)}
|
||
|
|
onPause={() => onPauseFile(file.id)}
|
||
|
|
onResume={() => onResumeFile(file.id)}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Footer Actions */}
|
||
|
|
<div className="p-6 border-t border-kodo-steel bg-kodo-ink flex justify-between items-center">
|
||
|
|
<div className="flex gap-2">
|
||
|
|
<Button variant="ghost" size="sm" className="text-gray-400 hover:text-white" onClick={onClose}>Cancel All</Button>
|
||
|
|
</div>
|
||
|
|
<div className="flex gap-3">
|
||
|
|
<Button variant="secondary" size="sm" icon={<Upload className="w-4 h-4" />}>
|
||
|
|
Apply Metadata to All
|
||
|
|
</Button>
|
||
|
|
{uploadingCount === 0 && completedCount < files.length && (
|
||
|
|
<Button variant="primary" size="sm" icon={<Play className="w-4 h-4" />} onClick={onStartUpload}>
|
||
|
|
Start Upload
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
{completedCount === files.length && (
|
||
|
|
<Button variant="primary" size="sm" onClick={onClose}>
|
||
|
|
Done
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|