29 lines
914 B
TypeScript
29 lines
914 B
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { CheckCircle, WarningCircle } from "@phosphor-icons/react/ssr";
|
||
|
|
import { useConfigToasts } from "@/lib/ws/client";
|
||
|
|
|
||
|
|
export function ToastStack() {
|
||
|
|
const toasts = useConfigToasts();
|
||
|
|
|
||
|
|
if (toasts.length === 0) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="fixed right-6 bottom-6 z-50 flex flex-col gap-2">
|
||
|
|
{toasts.map((toast) => (
|
||
|
|
<div
|
||
|
|
key={toast.id}
|
||
|
|
className="pn-toast flex max-w-[340px] items-center gap-2.5 rounded-lg border border-border bg-surface px-3.5 py-3 shadow-[var(--pn-shadow-md)]"
|
||
|
|
>
|
||
|
|
{toast.tone === "ok" ? (
|
||
|
|
<CheckCircle size={20} className="shrink-0 text-accent" aria-hidden />
|
||
|
|
) : (
|
||
|
|
<WarningCircle size={20} className="shrink-0 text-status-down" aria-hidden />
|
||
|
|
)}
|
||
|
|
<span className="text-[13px] text-fg">{toast.message}</span>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|