31 lines
746 B
TypeScript
31 lines
746 B
TypeScript
import React from 'react'
|
|
import { createPortal } from 'react-dom'
|
|
import Toast, { ToastProps } from './Toast'
|
|
|
|
export interface ToastItem extends Omit<ToastProps, 'onClose'> {
|
|
id: string
|
|
}
|
|
|
|
interface ToastContainerProps {
|
|
toasts: ToastItem[]
|
|
onRemoveToast: (id: string) => void
|
|
}
|
|
|
|
const ToastContainer: React.FC<ToastContainerProps> = ({ toasts, onRemoveToast }) => {
|
|
const portalRoot = document.getElementById('toast-root') || document.body
|
|
|
|
return createPortal(
|
|
<div className="fixed top-4 right-4 z-[9999] space-y-2">
|
|
{toasts.map((toast) => (
|
|
<Toast
|
|
key={toast.id}
|
|
{...toast}
|
|
onClose={onRemoveToast}
|
|
/>
|
|
))}
|
|
</div>,
|
|
portalRoot
|
|
)
|
|
}
|
|
|
|
export default ToastContainer |