Working on template loader

src/components/Modal/index.tsx

@@ -0,0 +1,57 @@
+import { JSX } from "preact";
+
+type Props = {
+    setModalOpen: (open: boolean) => never;
+    title: string;
+    onSubmitText?: string;
+    onSubmit?: () => never;
+    children: string | JSX.Element | JSX.Element[] | (() => JSX.Element);
+};
+
+export const Modal = ({ setModalOpen, title, onSubmit, onSubmitText, children }: Props) => {
+    return (
+        <div class="modal is-active">
+            <div
+                class="modal-background"
+                onClick={() => {
+                    setModalOpen(false);
+                }}
+            ></div>
+            <div class="modal-card">
+                <header class="modal-card-head">
+                    <label class="modal-card-title">{title}</label>
+                    <button
+                        class="delete close-modal"
+                        aria-label="close"
+                        onClick={() => {
+                            setModalOpen(false);
+                        }}
+                    ></button>
+                </header>
+                <section class="modal-card-body">{children}</section>
+                {onSubmit && (
+                    <footer class="modal-card-foot">
+                        <button class="button is-success" onChange={onSubmit}>
+                            {onSubmitText || "Save"}
+                        </button>
+                        <button
+                            class="button close-modal"
+                            onClick={() => {
+                                setModalOpen(false);
+                            }}
+                        >
+                            Cancel
+                        </button>
+                    </footer>
+                )}
+            </div>
+            <button
+                class="modal-close is-large close-modal"
+                aria-label="close"
+                onClick={() => {
+                    setModalOpen(false);
+                }}
+            ></button>
+        </div>
+    );
+};