49 lines
1.3 KiB
JavaScript
49 lines
1.3 KiB
JavaScript
"use client";
|
|
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { useEffect } from "react";
|
|
import { hideToast } from "@/redux/slices/toastSlice";
|
|
|
|
export default function Toast() {
|
|
const dispatch = useDispatch();
|
|
const { message, type, visible } = useSelector((state) => state.toast);
|
|
|
|
useEffect(() => {
|
|
if (visible) {
|
|
const timer = setTimeout(() => {
|
|
dispatch(hideToast());
|
|
}, 3000);
|
|
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [visible, dispatch]);
|
|
|
|
if (!visible) return null;
|
|
|
|
const bgColor = {
|
|
success: "bg-green-50 border-green-200 text-green-700",
|
|
error: "bg-red-50 border-red-200 text-red-700",
|
|
warning: "bg-yellow-50 border-yellow-200 text-yellow-700",
|
|
info: "bg-blue-50 border-blue-200 text-blue-700",
|
|
}[type];
|
|
|
|
const progressColor = {
|
|
success: "bg-green-500",
|
|
error: "bg-red-500",
|
|
warning: "bg-yellow-500",
|
|
info: "bg-blue-500",
|
|
}[type];
|
|
|
|
return (
|
|
<div className="fixed top-5 left-5 z-50 max-w-sm animate-in slide-in-from-top">
|
|
<div
|
|
className={`border p-4 rounded-lg shadow-lg ${bgColor}`}
|
|
role="alert"
|
|
>
|
|
<p className="font-medium text-sm">{message}</p>
|
|
<div className={`h-1 w-full ${progressColor} mt-2 rounded-full`}></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|