46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import { useToastStore } from '../../stores/toastStore';
|
|
import { X, CheckCircle, AlertCircle, Info } from 'lucide-react';
|
|
|
|
const icons = {
|
|
success: CheckCircle,
|
|
error: AlertCircle,
|
|
info: Info,
|
|
};
|
|
|
|
const styles = {
|
|
success: 'bg-green-50 border-green-200 text-green-800',
|
|
error: 'bg-red-50 border-red-200 text-red-800',
|
|
info: 'bg-blue-50 border-blue-200 text-blue-800',
|
|
};
|
|
|
|
export const ToastContainer = () => {
|
|
const { toasts, removeToast } = useToastStore();
|
|
|
|
if (toasts.length === 0) return null;
|
|
|
|
return (
|
|
<div className="fixed bottom-4 left-4 right-4 sm:left-auto z-50 max-w-sm flex flex-col gap-2">
|
|
{toasts.map((toast) => {
|
|
const Icon = icons[toast.type];
|
|
return (
|
|
<div
|
|
key={toast.id}
|
|
className={`flex items-center gap-3 px-4 py-3 rounded-lg border shadow-lg w-full animate-in slide-in-from-right ${styles[toast.type]}`}
|
|
role="alert"
|
|
>
|
|
<Icon size={20} />
|
|
<p className="flex-1 text-sm">{toast.message}</p>
|
|
<button
|
|
onClick={() => removeToast(toast.id)}
|
|
className="icon-button hover:bg-black/5"
|
|
aria-label="Закрыть"
|
|
>
|
|
<X size={16} />
|
|
</button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|