36 lines
992 B
TypeScript
36 lines
992 B
TypeScript
"use client";
|
||
|
||
import { useApiStore } from "@/store/uiStore";
|
||
|
||
export default function AppToasts() {
|
||
const { toasts, removeToast } = useApiStore((s) => ({
|
||
toasts: s.toasts,
|
||
removeToast: s.removeToast
|
||
}));
|
||
|
||
return (
|
||
<div className="toast-stack">
|
||
{toasts.map((toast) => (
|
||
<div key={toast.id} className={`toast show align-items-center border-0 ${toastClass(toast.type)}`}>
|
||
<div className="d-flex">
|
||
<div className="toast-body text-white">{toast.message}</div>
|
||
<button
|
||
className="btn btn-sm btn-link text-white"
|
||
onClick={() => removeToast(toast.id)}
|
||
aria-label="dismiss"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function toastClass(type: "success" | "error" | "info") {
|
||
if (type === "success") return "bg-success text-white";
|
||
if (type === "error") return "bg-danger text-white";
|
||
return "bg-info text-white";
|
||
}
|