25 lines
676 B
TypeScript
25 lines
676 B
TypeScript
import { AlertCircle } from 'lucide-react';
|
|
import { Toast } from '../context/toast/ToastContext';
|
|
|
|
interface ToastsProps {
|
|
toasts: Toast[];
|
|
}
|
|
|
|
export const Toasts = ({ toasts }: ToastsProps) => {
|
|
return (
|
|
<div className='fixed bottom-4 left-4 z-[9999] space-y-2'>
|
|
{toasts.map(toast => {
|
|
return (
|
|
<div
|
|
key={toast.id}
|
|
className='flex items-center gap-2 p-3 text-red-600 bg-red-50 rounded-lg border border-red-200 shadow-lg hover:shadow-xl'
|
|
>
|
|
<AlertCircle className='h-5 w-5 shrink-0' />
|
|
<p className='text-sm'>{toast.message}</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|