38 lines
1.3 KiB
JavaScript
38 lines
1.3 KiB
JavaScript
import React, { useEffect } from 'react';
|
|
import { X, CheckCircle, AlertCircle, Info } from 'lucide-react';
|
|
|
|
export default function Toast({ message, type = 'success', onClose }) {
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
onClose();
|
|
}, 5000);
|
|
return () => clearTimeout(timer);
|
|
}, [onClose]);
|
|
|
|
const icons = {
|
|
success: <CheckCircle className="text-emerald-500" size={20} />,
|
|
error: <AlertCircle className="text-red-500" size={20} />,
|
|
info: <Info className="text-blue-500" size={20} />
|
|
};
|
|
|
|
const bgColors = {
|
|
success: 'bg-emerald-50 border-emerald-100',
|
|
error: 'bg-red-50 border-red-100',
|
|
info: 'bg-blue-50 border-blue-100'
|
|
};
|
|
|
|
return (
|
|
<div className={`fixed top-6 right-6 z-[9999] flex items-center gap-3 px-4 py-3 rounded-2xl border shadow-xl animate-in slide-in-from-right-8 duration-300 ${bgColors[type] || bgColors.success}`}>
|
|
<div className="flex-shrink-0">
|
|
{icons[type] || icons.success}
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="text-sm font-bold text-gray-900 whitespace-pre-wrap">{message}</p>
|
|
</div>
|
|
<button onClick={onClose} className="p-1 hover:bg-black/5 rounded-full transition-colors text-gray-400">
|
|
<X size={16} />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|