File size: 5,616 Bytes
540f559 |
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 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
import React from 'react';
import { FileItem, UploadStatus } from '../types';
import { FileText, Loader2, CheckCircle2, AlertTriangle, ExternalLink, X, Edit2 } from 'lucide-react';
interface UploadListProps {
files: FileItem[];
onRemove: (id: string) => void;
onPathChange: (id: string, newPath: string) => void;
}
export const UploadList: React.FC<UploadListProps> = ({ files, onRemove, onPathChange }) => {
if (files.length === 0) return null;
return (
<div className="bg-white/60 backdrop-blur-md rounded-2xl shadow-sm border border-gray-100 overflow-hidden ring-1 ring-gray-200/50">
<div className="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
<h3 className="font-semibold text-gray-700 flex items-center gap-2">
<div className="w-2 h-2 rounded-full bg-indigo-500" />
Upload Queue
<span className="bg-gray-200 text-gray-600 text-xs py-0.5 px-2 rounded-full ml-1">{files.length}</span>
</h3>
<span className="text-xs text-gray-400 font-medium">Auto-saving path changes</span>
</div>
<div className="max-h-[400px] overflow-y-auto custom-scrollbar divide-y divide-gray-100">
{files.map((item) => (
<div key={item.id} className="p-4 hover:bg-white transition-colors flex items-center gap-4 group relative">
{/* Icon Box */}
<div className={`
p-3 rounded-xl flex-shrink-0 transition-colors
${item.status === UploadStatus.SUCCESS ? 'bg-green-50 text-green-600' :
item.status === UploadStatus.ERROR ? 'bg-red-50 text-red-600' : 'bg-indigo-50 text-indigo-600'}
`}>
<FileText className="w-5 h-5" />
</div>
{/* File Info & Input */}
<div className="flex-1 min-w-0 space-y-1">
<div className="flex items-center gap-2">
<span className="font-medium text-sm text-gray-700 truncate max-w-[180px] md:max-w-xs" title={item.file.name}>
{item.file.name}
</span>
<span className="text-[10px] bg-gray-100 text-gray-500 px-1.5 py-0.5 rounded">
{(item.file.size / 1024).toFixed(1)} KB
</span>
</div>
{item.status === UploadStatus.IDLE && (
<div className="relative max-w-sm">
<input
type="text"
value={item.path}
onChange={(e) => onPathChange(item.id, e.target.value)}
className="w-full text-xs py-1.5 pl-2 pr-7 border border-transparent hover:border-gray-200 focus:border-indigo-400 focus:bg-white rounded bg-transparent transition-all outline-none text-gray-600 font-mono"
placeholder="path/to/file.ext"
/>
<Edit2 className="w-3 h-3 text-gray-300 absolute right-2 top-2 pointer-events-none" />
</div>
)}
{item.status === UploadStatus.UPLOADING && (
<div className="w-full bg-gray-100 rounded-full h-1.5 mt-2 overflow-hidden">
<div className="bg-indigo-500 h-1.5 rounded-full animate-[progress_1s_ease-in-out_infinite]" style={{width: '70%'}}></div>
</div>
)}
{item.status === UploadStatus.SUCCESS && (
<a
href={item.url}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1 text-xs font-medium text-green-600 hover:text-green-700 hover:underline"
>
View on Hub <ExternalLink className="w-3 h-3" />
</a>
)}
{item.status === UploadStatus.ERROR && (
<span className="text-xs font-medium text-red-500 truncate block" title={item.error}>
Error: {item.error}
</span>
)}
</div>
{/* Actions / Status Icons */}
<div className="flex items-center gap-2 pl-2 border-l border-gray-50">
{item.status === UploadStatus.UPLOADING && (
<Loader2 className="w-5 h-5 text-indigo-500 animate-spin" />
)}
{item.status === UploadStatus.SUCCESS && (
<div className="flex items-center gap-1 text-green-600 bg-green-50 px-2 py-1 rounded-lg text-xs font-medium">
<CheckCircle2 className="w-4 h-4" />
<span>Done</span>
</div>
)}
{item.status === UploadStatus.ERROR && (
<div className="flex items-center gap-1 text-red-600 bg-red-50 px-2 py-1 rounded-lg text-xs font-medium">
<AlertTriangle className="w-4 h-4" />
<span>Failed</span>
</div>
)}
{item.status !== UploadStatus.UPLOADING && item.status !== UploadStatus.SUCCESS && (
<button
onClick={() => onRemove(item.id)}
className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
title="Remove file"
>
<X className="w-4 h-4" />
</button>
)}
</div>
</div>
))}
</div>
</div>
);
}; |