87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
/**
|
|
* Success Modal - Focolari Voting System
|
|
* Modal fullscreen per conferma ingresso con carosello multilingua
|
|
*/
|
|
|
|
import {Modal, WelcomeCarousel} from '../components';
|
|
|
|
interface SuccessModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
userName?: string;
|
|
durationMs?: number;
|
|
}
|
|
|
|
// Numero messaggi nel carosello
|
|
const CAROUSEL_MESSAGE_COUNT = 10;
|
|
|
|
export function SuccessModal({
|
|
isOpen,
|
|
onClose,
|
|
userName,
|
|
durationMs = 8000
|
|
}: SuccessModalProps) {
|
|
// Calcola intervallo carosello per mostrare tutti i messaggi durante la durata
|
|
const carouselIntervalMs = Math.floor(durationMs / (CAROUSEL_MESSAGE_COUNT * 1.2));
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
variant="success"
|
|
autoCloseMs={durationMs}
|
|
fullscreen
|
|
>
|
|
<div className="flex flex-col items-center justify-center min-h-screen p-8">
|
|
{/* Success Icon */}
|
|
<div className="mb-8">
|
|
<div
|
|
className="inline-flex items-center justify-center w-32 h-32 rounded-full bg-white/20 animate-pulse-glow">
|
|
<svg
|
|
className="w-20 h-20 text-white"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={3}
|
|
d="M5 13l4 4L19 7"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Carosello Messaggi Benvenuto */}
|
|
<WelcomeCarousel userName={userName} intervalMs={carouselIntervalMs}/>
|
|
|
|
{/* Sub text */}
|
|
<p className="text-2xl md:text-3xl text-white/80 mt-8 animate-fade-in">
|
|
Ingresso registrato con successo
|
|
</p>
|
|
|
|
{/* Auto-close indicator */}
|
|
<div className="mt-12 w-full max-w-md">
|
|
<div className="w-full h-2 bg-white/30 rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full bg-white rounded-full"
|
|
style={{
|
|
animation: `shrink ${durationMs}ms linear forwards`,
|
|
}}
|
|
/>
|
|
</div>
|
|
<style>{`
|
|
@keyframes shrink {
|
|
from { width: 100%; }
|
|
to { width: 0%; }
|
|
}
|
|
`}</style>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
export default SuccessModal;
|