63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
import { ImageUploadProgress } from '../../types/image';
|
|
import { CheckCircle, AlertCircle, Loader } from 'lucide-react';
|
|
|
|
interface UploadProgressProps {
|
|
progress: ImageUploadProgress;
|
|
fileName: string;
|
|
}
|
|
|
|
export function UploadProgress({ progress, fileName }: UploadProgressProps) {
|
|
const getStatusIcon = () => {
|
|
switch (progress.status) {
|
|
case 'complete':
|
|
return <CheckCircle className="h-5 w-5 text-green-500" />;
|
|
case 'error':
|
|
return <AlertCircle className="h-5 w-5 text-red-500" />;
|
|
default:
|
|
return <Loader className="h-5 w-5 text-blue-500 animate-spin" />;
|
|
}
|
|
};
|
|
|
|
const getStatusText = () => {
|
|
switch (progress.status) {
|
|
case 'uploading':
|
|
return 'Загрузка...';
|
|
case 'processing':
|
|
return 'Обработка...';
|
|
case 'complete':
|
|
return 'Загрузка завершена';
|
|
case 'error':
|
|
return progress.error || 'Сбой загрузки';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg">
|
|
{getStatusIcon()}
|
|
<div className="flex-1 min-w-0">
|
|
{progress.status === 'complete' && progress.imageUrl ? (
|
|
<div className="relative w-48 h-32 rounded-lg overflow-hidden group">
|
|
<img
|
|
src={progress.imageUrl}
|
|
alt="Превью загруженного изображения"
|
|
className="w-full h-full object-cover rounded-md"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<p className="text-sm font-medium text-gray-900 truncate">{fileName}</p>
|
|
)}
|
|
<p className="text-sm text-gray-500">{getStatusText()}</p>
|
|
</div>
|
|
{(progress.status === 'uploading' || progress.status === 'processing') && (
|
|
<div className="w-24">
|
|
<div className="bg-gray-200 rounded-full h-2.5">
|
|
<div
|
|
className="bg-blue-600 h-2.5 rounded-full transition-all duration-300"
|
|
style={{ width: `${progress.progress}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
} |