import {AnimatePresence, m, Target, TargetAndTransition} from 'framer-motion'; import React from 'react'; import clsx from 'clsx'; import {IconButton} from '../buttons/icon-button'; import {CloseIcon} from '../../icons/material/Close'; import {MixedText} from '../../i18n/mixed-text'; import {Button} from '../buttons/button'; import {toastState, useToastStore} from './toast-store'; import {Link} from 'react-router-dom'; import {ErrorOutlineIcon} from '../../icons/material/ErrorOutline'; import {CheckCircleIcon} from '../../icons/material/CheckCircle'; import {ProgressCircle} from '@common/ui/progress/progress-circle'; const initial: Target = {opacity: 0, y: 50, scale: 0.3}; const animate: TargetAndTransition = {opacity: 1, y: 0, scale: 1}; const exit: TargetAndTransition = { opacity: 0, scale: 0.5, }; export function ToastContainer() { const toasts = useToastStore(s => s.toasts); return (
{toasts.map(toast => (
toast.timer?.pause()} onPointerLeave={() => toast.timer?.resume()} role="alert" aria-live={toast.type === 'danger' ? 'assertive' : 'polite'} > {toast.type === 'danger' && ( )} {toast.type === 'loading' && ( )} {toast.type === 'positive' && ( )}
{toast.action && ( )} {toast.type !== 'loading' && ( toast.timer?.pause()} onBlur={() => toast.timer?.resume()} type="button" className="flex-shrink-0" onClick={() => { toastState().remove(toast.id); }} size="sm" > )}
))}
); }