39 lines
990 B
JavaScript
39 lines
990 B
JavaScript
import React, { useEffect } from 'react';
|
||
import { CheckCircle, XCircle, AlertCircle, Info } from 'lucide-react';
|
||
import './Toast.css';
|
||
|
||
const Toast = ({ message, type = 'info', duration = 3000, onClose }) => {
|
||
useEffect(() => {
|
||
if (duration > 0) {
|
||
const timer = setTimeout(() => {
|
||
onClose();
|
||
}, duration);
|
||
return () => clearTimeout(timer);
|
||
}
|
||
}, [duration, onClose]);
|
||
|
||
const getIcon = () => {
|
||
switch (type) {
|
||
case 'success':
|
||
return <CheckCircle size={20} />;
|
||
case 'error':
|
||
return <XCircle size={20} />;
|
||
case 'warning':
|
||
return <AlertCircle size={20} />;
|
||
case 'info':
|
||
default:
|
||
return <Info size={20} />;
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className={`toast toast-${type}`}>
|
||
<div className="toast-icon">{getIcon()}</div>
|
||
<div className="toast-message">{message}</div>
|
||
<button className="toast-close" onClick={onClose}>×</button>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Toast;
|