@srsergio/taptapp-ar 1.0.3 → 1.0.5

package/dist/react/ProgressDialog.js

@@ -1,57 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
-import { CheckCircle2, Loader2, Upload, Image as ImageIcon, Video as VideoIcon, } from "lucide-react";
-export function ProgressDialog({ open, imageStatus, videoStatus, arProcessingStatus, arUploadStatus, imageProgress = 0, videoProgress = 0, arProcessingProgress = 0, arUploadProgress = 0, }) {
-    // Configurar las etapas del progreso
-    const stages = [
-        {
-            label: "Subiendo imagen",
-            status: imageStatus,
-            progress: imageProgress,
-            icon: _jsx(ImageIcon, { className: "h-5 w-5" }),
-        },
-        {
-            label: "Subiendo video",
-            status: videoStatus,
-            progress: videoProgress,
-            icon: _jsx(VideoIcon, { className: "h-5 w-5" }),
-        },
-        {
-            label: "Procesando imagen para AR",
-            status: arProcessingStatus,
-            progress: arProcessingProgress,
-            icon: _jsx(Loader2, { className: "h-5 w-5" }),
-        },
-        {
-            label: "Subiendo experiencia AR",
-            status: arUploadStatus,
-            progress: arUploadProgress,
-            icon: _jsx(Upload, { className: "h-5 w-5" }),
-        },
-    ];
-    // Calcular el progreso total (promedio de todos los procesos)
-    const completedSteps = stages.filter((stage) => stage.status === "completed").length;
-    const totalProgress = (imageProgress + videoProgress + arProcessingProgress + arUploadProgress) / 4;
-    const overallProgress = Math.min(Math.max(totalProgress, completedSteps * 25), 100);
-    // Bloquear el scroll cuando el modal está abierto
-    useEffect(() => {
-        if (open) {
-            document.body.style.overflow = "hidden";
-        }
-        else {
-            document.body.style.overflow = "auto";
-        }
-        return () => {
-            document.body.style.overflow = "auto";
-        };
-    }, [open]);
-    if (!open)
-        return null;
-    return (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center overflow-y-auto bg-black bg-opacity-50 p-4", children: _jsxs("div", { className: "relative max-h-full w-full max-w-md overflow-hidden rounded-lg bg-white p-6 shadow-xl", children: [_jsx("div", { className: "mb-4 flex items-center justify-between", children: _jsx("h2", { className: "text-center font-semibold text-xl", children: "Guardando experiencia AR" }) }), _jsx("div", { className: "mt-2", children: _jsx("div", { className: "relative pt-1", children: _jsxs("div", { className: "mb-6", children: [_jsx("div", { className: "h-2 w-full rounded-full bg-gray-200", children: _jsx("div", { className: "h-2 rounded-full bg-blue-600 transition-all duration-500", style: { width: `${overallProgress}%` } }) }), _jsxs("div", { className: "mt-2 text-center text-gray-600 text-sm", children: ["Progreso total: ", Math.round(overallProgress), "%"] })] }) }) }), _jsx("div", { className: "mt-2 space-y-5", children: stages.map((stage, index) => (_jsx("div", { className: "relative", children: _jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: `mr-3 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full ${stage.status === "completed"
-                                        ? "bg-green-100"
-                                        : stage.status === "processing"
-                                            ? "bg-blue-100"
-                                            : stage.status === "error"
-                                                ? "bg-red-100"
-                                                : "bg-gray-100"}`, children: stage.status === "completed" ? (_jsx(CheckCircle2, { className: "h-6 w-6 text-green-600" })) : stage.status === "processing" ? (_jsx("div", { className: "text-blue-600", children: stage.icon })) : stage.status === "error" ? (_jsx("div", { className: "text-red-600", children: stage.icon })) : (_jsx("div", { className: "text-gray-400", children: stage.icon })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "font-medium text-sm", children: stage.label }), stage.status === "processing" && (_jsxs("div", { className: "mt-1", children: [_jsx("div", { className: "h-1.5 w-full rounded-full bg-gray-200", children: _jsx("div", { className: "h-1.5 rounded-full bg-blue-600 transition-all duration-300", style: { width: `${stage.progress || 0}%` } }) }), _jsxs("div", { className: "mt-1 text-gray-500 text-xs", children: [Math.round(stage.progress || 0), "%"] })] })), stage.status === "completed" && (_jsx("div", { className: "mt-1 text-green-600 text-xs", children: "Completado" })), stage.status === "error" && (_jsx("div", { className: "mt-1 text-red-600 text-xs", children: "Error" })), stage.status === "pending" && (_jsx("div", { className: "mt-1 text-gray-500 text-xs", children: "Pendiente" }))] })] }) }, index))) }), completedSteps === stages.length && (_jsxs("div", { className: "mt-4 rounded-lg bg-green-50 p-4 text-center", children: [_jsx(CheckCircle2, { className: "mx-auto mb-2 h-8 w-8 text-green-500" }), _jsx("p", { className: "font-medium text-green-800", children: "\u00A1Experiencia AR guardada con \u00E9xito!" }), _jsx("p", { className: "text-green-700 text-sm", children: "Tu contenido est\u00E1 listo para ser visualizado." })] }))] }) }));
-}