Add Modal island

fresh.gen.ts

@@ -16,8 +16,9 @@ import * as $9 from "./routes/register.tsx";
 import * as $$0 from "./islands/Editor.tsx";
 import * as $$1 from "./islands/HomeBar.tsx";
 import * as $$2 from "./islands/LoginFrame.tsx";
-import * as $$3 from "./islands/PostList.tsx";
-import * as $$4 from "./islands/TopBar.tsx";
+import * as $$3 from "./islands/Modal.tsx";
+import * as $$4 from "./islands/PostList.tsx";
+import * as $$5 from "./islands/TopBar.tsx";
 
 const manifest = {
   routes: {
@@ -36,8 +37,9 @@ const manifest = {
     "./islands/Editor.tsx": $$0,
     "./islands/HomeBar.tsx": $$1,
     "./islands/LoginFrame.tsx": $$2,
-    "./islands/PostList.tsx": $$3,
-    "./islands/TopBar.tsx": $$4,
+    "./islands/Modal.tsx": $$3,
+    "./islands/PostList.tsx": $$4,
+    "./islands/TopBar.tsx": $$5,
   },
   baseUrl: import.meta.url,
   config,

islands/Modal.tsx

@@ -0,0 +1,38 @@
+/** @jsx h */
+/** @jsxFrag Fragment */
+import { Fragment, h } from "preact";
+import { useState, useEffect } from "preact/hooks";
+
+interface ModalGlobalHook {
+  setVisible: (flag: boolean) => void;
+}
+
+declare global {
+  interface Window {
+    $modal?: ModalGlobalHook;
+  }
+}
+
+export default function Modal() {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    window.$modal = {
+      setVisible: (flag: boolean) => {
+        setVisible(flag);
+      },
+    };
+
+    return () => {
+      delete window.$modal;
+    };
+  }, []);
+
+  return (
+    <>
+      <div className={`pd-modal${!visible ? " pd-modal-hidden" : ""}`}>
+        <div className="pd-modal-content"></div>
+      </div>
+    </>
+  );
+}

routes/_app.tsx

@@ -3,6 +3,7 @@
 import { Fragment, h } from "preact";
 import { asset, Head } from "$fresh/runtime.ts";
 import { AppProps } from "$fresh/server.ts";
+import Modal from "../islands/Modal.tsx";
 
 export default function App({ Component }: AppProps) {
   return (
@@ -14,6 +15,7 @@ export default function App({ Component }: AppProps) {
           rel="stylesheet"
         />
       </Head>
+      <Modal />
       <Component />
     </>
   );

static/global.css

@@ -105,6 +105,34 @@ button {
 }
 /* Loading styles end */
 
+/* Modal styles start */
+.pd-modal {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pd-modal.pd-modal-hidden {
+  display: none;
+}
+
+.pd-modal .pd-modal-content {
+  background-color: #fff;
+  border: 1px solid #dee2e6;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  max-width: 500px;
+  max-height: 60%;
+}
+/* Modal styles end */
+
 /* Login frame styles start */
 .pd-login-frame {
   width: 375px;