63 lines
2 KiB
TypeScript
63 lines
2 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { Play, Pause, X } from 'lucide-react';
|
||
|
|
|
||
|
|
interface UploadProgressBarProps {
|
||
|
|
progress: number; // 0 to 100
|
||
|
|
status: 'uploading' | 'paused' | 'completed' | 'error' | 'processing';
|
||
|
|
onPause?: () => void;
|
||
|
|
onResume?: () => void;
|
||
|
|
onCancel?: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const UploadProgressBar: React.FC<UploadProgressBarProps> = ({
|
||
|
|
progress,
|
||
|
|
status,
|
||
|
|
onPause,
|
||
|
|
onResume,
|
||
|
|
onCancel
|
||
|
|
}) => {
|
||
|
|
const isPaused = status === 'paused';
|
||
|
|
const isCompleted = status === 'completed';
|
||
|
|
const isError = status === 'error';
|
||
|
|
|
||
|
|
const getColor = () => {
|
||
|
|
if (isError) return 'bg-kodo-red';
|
||
|
|
if (isCompleted) return 'bg-kodo-lime';
|
||
|
|
if (isPaused) return 'bg-kodo-gold';
|
||
|
|
return 'bg-kodo-cyan';
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="w-full flex items-center gap-3">
|
||
|
|
<div className="flex-1">
|
||
|
|
<div className="flex justify-between text-[10px] uppercase font-bold text-gray-500 mb-1">
|
||
|
|
<span>{status}</span>
|
||
|
|
<span>{Math.round(progress)}%</span>
|
||
|
|
</div>
|
||
|
|
<div className="h-1.5 bg-kodo-steel/50 rounded-full overflow-hidden">
|
||
|
|
<div
|
||
|
|
className={`h-full transition-all duration-300 ${getColor()} ${status === 'uploading' ? 'animate-pulse' : ''}`}
|
||
|
|
style={{ width: `${progress}%` }}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{!isCompleted && !isError && (
|
||
|
|
<div className="flex gap-1">
|
||
|
|
{isPaused ? (
|
||
|
|
<button onClick={onResume} className="p-1 hover:text-white text-kodo-lime transition-colors" title="Resume">
|
||
|
|
<Play className="w-3 h-3 fill-current" />
|
||
|
|
</button>
|
||
|
|
) : (
|
||
|
|
<button onClick={onPause} className="p-1 hover:text-white text-kodo-gold transition-colors" title="Pause">
|
||
|
|
<Pause className="w-3 h-3 fill-current" />
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
<button onClick={onCancel} className="p-1 hover:text-white text-kodo-red transition-colors" title="Cancel">
|
||
|
|
<X className="w-3 h-3" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|