32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@common/components";
|
|
import { useUploadStore } from "@/shared/lib/use-upload-store";
|
|
import { UploadProgressModal } from "./upload-progress-modal";
|
|
import { CloudUpload } from "lucide-react";
|
|
|
|
export function UploadProgressIndicator() {
|
|
const { isUploading, uploadProgress, showProgressModal, setShowProgressModal } = useUploadStore();
|
|
|
|
if (!isUploading || !uploadProgress) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="fixed top-4 right-[150px] z-[9998]">
|
|
<Button
|
|
onClick={() => setShowProgressModal(true)}
|
|
className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-5 py-3 rounded-lg shadow-lg"
|
|
>
|
|
<CloudUpload style={{ width: '20px', height: '20px' }} />
|
|
<span className="bg-white text-blue-600 px-3 py-1 rounded text-base font-bold">
|
|
{Math.max(0, Math.round(((uploadProgress.currentFile - 1) * 5 + uploadProgress.currentStepIndex) / (uploadProgress.totalFiles * 5) * 100))}%
|
|
</span>
|
|
</Button>
|
|
</div>
|
|
|
|
<UploadProgressModal />
|
|
</>
|
|
);
|
|
}
|