Add Modal component for displaying dialogs

src/components/Modal.js

@@ -0,0 +1,31 @@
+import { $html, $if } from "sigpro";
+import { tt } from "../core/i18n.js";
+import { Button } from "./Button.js";
+
+/** MODAL */
+export const Modal = (props, children) => {
+  const { title, buttons, open, ...rest } = props;
+  const close = () => open(false);
+
+  return $if(open, () =>
+    $html("dialog", { ...rest, class: "modal modal-open" }, [
+      $html("div", { class: "modal-box" }, [
+        title ? $html("h3", { class: "text-lg font-bold mb-4" }, title) : null,
+        typeof children === "function" ? children() : children,
+        $html("div", { class: "modal-action flex gap-2" }, [
+          ...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
+          Button({ onclick: close }, tt("close")()),
+        ]),
+      ]),
+      $html(
+        "form",
+        {
+          method: "dialog",
+          class: "modal-backdrop",
+          onclick: (e) => (e.preventDefault(), close()),
+        },
+        [$html("button", {}, "close")],
+      ),
+    ]),
+  );
+};