ToastProvider.tsx 731 B

123456789101112131415161718192021222324
  1. import React from 'react';
  2. import { IToast, useToastStore } from '../../../state/toastStore';
  3. import { Toast } from '../../ui/Toast';
  4. export const ToastProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  5. const { toasts, removeToast } = useToastStore();
  6. const renderToast = (toast: IToast) => {
  7. const { status, title, description, id } = toast;
  8. return <Toast status={status} title={title} message={description} id={id} onClose={() => removeToast(id)} />;
  9. };
  10. return (
  11. <>
  12. {toasts.map((toast) => (
  13. <div key={toast.id} className="position-fixed bottom-0 end-0 p-3" style={{ zIndex: 11 }}>
  14. {renderToast(toast)}
  15. </div>
  16. ))}
  17. {children}
  18. </>
  19. );
  20. };