import React, { useEffect } from 'react';
import { store } from '../store/store';
import { observer } from 'mobx-react-lite';
export const Toast = observer(({ children, className, type, id }) => {
const typeIcon = (type) => {
switch (type) {
case 'warning':
return (
);
case 'error':
return (
);
case 'success':
return (
);
default:
return (
);
}
};
const typeColor = (type) => {
switch (type) {
case 'warning':
return 'bg-amber-100 border-amber-200 text-amber-600';
case 'error':
return 'bg-rose-100 border-rose-200 text-rose-600';
case 'success':
return 'bg-emerald-100 border-emerald-200 text-emerald-600';
default:
return 'bg-indigo-100 border-indigo-200 text-indigo-500';
}
};
useEffect(() => {
const timerId = setTimeout(() => store.removeNotification(id), 3000);
return () => clearTimeout(timerId);
}, []);
return (
{typeIcon(type)}
{children}
);
});