4bnode/skeleton/.4bnode/assets/js/components/ToastContainer.js

4bnode is a CLI-powered backend development platform with a built-in visual dashboard to generate, manage, and test Node.js/Express APIs faster.

import { html } from "../lib.js";
import { useApp } from "../context.js";

export function ToastContainer() {
  const { toasts } = useApp();
  if (toasts.length === 0) return null;
  return html`<div className="toast-container">
    ${toasts.map(
      (t) =>
        html`<div key=${t.id} className=${`toast ${t.type}`}>
          ${t.message}
        </div>`,
    )}
  </div>`;
}