standardnotes-app/packages/toast/src/ToastContainer.tsx
2022-06-07 13:19:45 -05:00

20 lines
538 B
TypeScript

import { FunctionComponent } from 'react'
import { useStore } from '@nanostores/react'
import { toastStore } from './toastStore'
import { ToastTimer } from './ToastTimer'
export const ToastContainer: FunctionComponent = () => {
const toasts = useStore(toastStore)
if (!toasts.length) {
return null
}
return (
<div className="flex flex-col items-end fixed z-index-toast bottom-6 right-6">
{toasts.map((toast, index) => (
<ToastTimer toast={toast} index={index} key={toast.id} />
))}
</div>
)
}