88 lines
2.9 KiB
TypeScript
88 lines
2.9 KiB
TypeScript
|
import React, { useState, useEffect } from "react";
|
||
|
|
import { ShoppingCart } from "lucide-react";
|
||
|
|
|
||
|
|
interface LoadingModalProps {
|
||
|
|
isOpen: boolean;
|
||
|
|
title: string;
|
||
|
|
message: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const LoadingModal: React.FC<LoadingModalProps> = ({
|
||
|
|
isOpen,
|
||
|
|
title,
|
||
|
|
message,
|
||
|
|
}) => {
|
||
|
|
const [isAnimating, setIsAnimating] = useState(false);
|
||
|
|
const [shouldRender, setShouldRender] = useState(false);
|
||
|
|
|
||
|
|
console.log("🔄 [LOADING_MODAL] Renderizando - isOpen:", isOpen);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (isOpen) {
|
||
|
|
setShouldRender(true);
|
||
|
|
// Pequeno delay para garantir que o DOM está pronto antes de iniciar a animação
|
||
|
|
setTimeout(() => setIsAnimating(true), 10);
|
||
|
|
} else {
|
||
|
|
// Iniciar animação de saída
|
||
|
|
setIsAnimating(false);
|
||
|
|
// Remover do DOM após a animação terminar
|
||
|
|
const timer = setTimeout(() => setShouldRender(false), 300);
|
||
|
|
return () => clearTimeout(timer);
|
||
|
|
}
|
||
|
|
}, [isOpen]);
|
||
|
|
|
||
|
|
// Não renderizar se não deve estar visível
|
||
|
|
if (!shouldRender) {
|
||
|
|
console.log("🔄 [LOADING_MODAL] Modal não está aberto, retornando null");
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log("🔄 [LOADING_MODAL] Renderizando modal com título:", title);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="fixed inset-0 z-[200] flex items-center justify-center">
|
||
|
|
{/* Overlay */}
|
||
|
|
<div
|
||
|
|
className={`absolute inset-0 bg-[#001f3f]/60 backdrop-blur-sm transition-opacity duration-300 ${
|
||
|
|
isAnimating ? "opacity-100" : "opacity-0"
|
||
|
|
}`}
|
||
|
|
></div>
|
||
|
|
|
||
|
|
{/* Dialog */}
|
||
|
|
<div
|
||
|
|
className={`relative bg-white rounded-3xl shadow-2xl max-w-md w-full mx-4 transform transition-all duration-300 ${
|
||
|
|
isAnimating ? "scale-100 opacity-100" : "scale-95 opacity-0"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{/* Header */}
|
||
|
|
<div className="p-6 bg-[#002147] text-white rounded-t-3xl relative overflow-hidden">
|
||
|
|
<div className="relative z-10">
|
||
|
|
<div className="flex items-center gap-3 mb-2">
|
||
|
|
<div className="w-12 h-12 bg-blue-500/20 rounded-2xl flex items-center justify-center">
|
||
|
|
<ShoppingCart className="w-6 h-6 text-orange-400" />
|
||
|
|
</div>
|
||
|
|
<div className="flex-1">
|
||
|
|
<h3 className="text-xl font-black">{title}</h3>
|
||
|
|
<p className="text-xs text-blue-400 font-bold uppercase tracking-wider mt-0.5">
|
||
|
|
Carregando
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="absolute right-[-10%] top-[-10%] w-32 h-32 bg-blue-400/10 rounded-full blur-2xl"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Content */}
|
||
|
|
<div className="p-6">
|
||
|
|
<div className="flex items-center gap-4">
|
||
|
|
<div className="w-8 h-8 border-4 border-[#002147] border-t-transparent rounded-full animate-spin flex-shrink-0"></div>
|
||
|
|
<p className="text-slate-600 text-sm leading-relaxed">{message}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default LoadingModal;
|