39 lines
990 B
React
39 lines
990 B
React
|
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;
|