31 lines
823 B
TypeScript
31 lines
823 B
TypeScript
import { useEffect } from "react";
|
|
import { createPortal } from "react-dom";
|
|
import { useUiStore } from "../store/uiStore";
|
|
|
|
export function ToastViewport() {
|
|
const message = useUiStore((s) => s.toastMessage);
|
|
const clearToast = useUiStore((s) => s.clearToast);
|
|
|
|
useEffect(() => {
|
|
if (!message) {
|
|
return;
|
|
}
|
|
const timer = window.setTimeout(() => clearToast(), 2200);
|
|
return () => window.clearTimeout(timer);
|
|
}, [message, clearToast]);
|
|
|
|
if (!message) {
|
|
return null;
|
|
}
|
|
|
|
return createPortal(
|
|
<div className="pointer-events-none fixed bottom-3 left-0 right-0 z-[300] flex justify-center px-3">
|
|
<div className="rounded-lg border border-slate-700/80 bg-slate-900/95 px-3 py-2 text-xs text-slate-100 shadow-xl">
|
|
{message}
|
|
</div>
|
|
</div>,
|
|
document.body
|
|
);
|
|
}
|
|
|