58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import {createPortal} from 'react-dom';
|
|
import StaticAlert from '@/components/StaticAlert';
|
|
import {Alert} from '@/context/AlertProvider';
|
|
|
|
interface AlertStackProps {
|
|
alerts: Alert[];
|
|
onClose: (id: string) => void;
|
|
}
|
|
|
|
export default function AlertStack({alerts, onClose}: AlertStackProps) {
|
|
const [mounted, setMounted] = React.useState(false);
|
|
|
|
React.useEffect(() => {
|
|
setMounted(true);
|
|
return () => setMounted(false);
|
|
}, []);
|
|
|
|
if (!mounted) return null;
|
|
|
|
const alertContent = (
|
|
<div className="fixed top-4 right-4 z-50 flex flex-col gap-3 pointer-events-none">
|
|
{alerts.map((alert, index) => (
|
|
<div
|
|
key={alert.id}
|
|
className="pointer-events-auto"
|
|
style={{
|
|
animation: 'slideInFromRight 0.3s ease-out forwards',
|
|
animationDelay: `${index * 50}ms`,
|
|
}}
|
|
>
|
|
<StaticAlert
|
|
type={alert.type}
|
|
message={alert.message}
|
|
onClose={() => onClose(alert.id)}
|
|
/>
|
|
</div>
|
|
))}
|
|
<style jsx>{`
|
|
@keyframes slideInFromRight {
|
|
from {
|
|
transform: translateX(400px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
|
|
return createPortal(alertContent, document.body);
|
|
}
|