Add modal

7 files changed, 99 insertions, 16 deletions

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 4d821c8..69afc6e 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -81,12 +81,6 @@ const config = {
         disableSwitch: true,
         respectPrefersColorScheme: false,
       },
-      announcementBar: {
-        content: `
-  <b>Greetings traveller!</b> You probably found this site by accident. <b>It is far from finished</b>, but if you\'re curious about the project, join the <a href="https://discord.com/invite/wDj3UYzec8">Discord server</a> and <b>say hello!</b>
-  `,
-        isCloseable: false,
-      },
       navbar: {
         title: "NeoHaskell",
         logo: {
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 8d2d6db..90d44f6 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -15,19 +15,23 @@ type ButtonType = {
     | "cyan"
     | "";
   disabled?: boolean;
+  onClick?: () => void;
+  className?: string;
 };
 
 const Button = ({
   children,
-  rounded = "none",
+  onClick = () => {},
+  rounded = "full",
   size = "md",
   color = "cyan",
   disabled,
+  className,
 }: ButtonType) => {
   return (
     <button
       className={classNames(
-        "border-black border-2 text-black",
+        "border-black border-2 text-black " + className,
 
         {
           "bg-violet-200 hover:bg-violet-300 active:bg-violet-400":
@@ -68,6 +72,7 @@ const Button = ({
             disabled,
         }
       )}
+      onClick={onClick}
       disabled={disabled}
     >
       {children}
diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx
index 0258e88..b10ed5f 100644
--- a/src/components/Dialog.tsx
+++ b/src/components/Dialog.tsx
@@ -3,7 +3,7 @@ import Button from "./Button";
 import classNames from "classnames";
 
 type DialogType = {
-  message: string;
+  children?: React.ReactNode;
   width?: "fit" | "full" | "1/2" | "1/3";
   cancelButtonText?: string;
   actionButtonText?: string;
@@ -18,7 +18,7 @@ type DialogType = {
 };
 
 const Dialog = ({
-  message,
+  children,
   width,
   cancelButtonText,
   actionButtonText,
@@ -27,25 +27,26 @@ const Dialog = ({
   return (
     <div
       className={classNames(
-        "px-8 py-4 dark:bg-slate-850 bg-white  border-4 border-black shadow-[8px_8px_0px_rgba(0,0,0,1)] grid place-content-center",
+        "p-9 dark:bg-slate-850 bg-white  border-4 border-black shadow-[8px_8px_0px_rgba(0,0,0,1)] grid place-content-center",
         { "w-fit": width === "fit" },
         { "w-full": width === "full" },
         { "w-1/2": width === "1/2" },
         { "w-1/3": width === "1/3" }
       )}
     >
-      <div>
-        <h1 className="text-2xl mb-4">{message}</h1>
+      <div className="flex flex-col gap-4">
+        {children}
         <div className="flex space-x-2 mx-auto">
           {cancelButtonText && (
             <button className="text-base">{cancelButtonText}</button>
           )}
           {actionButtonText && (
             <Button
-              buttonText={actionButtonText}
               rounded="full"
               color={actionButtonColor && actionButtonColor}
-            />
+            >
+              <h3>{actionButtonText}</h3>
+            </Button>
           )}
         </div>
       </div>
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
new file mode 100644
index 0000000..55ad174
--- /dev/null
+++ b/src/components/Modal.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import Button from "./Button";
+
+export interface ModalProps {
+  title: string | React.ReactNode;
+  children: React.ReactNode;
+  open: boolean;
+  okText?: string;
+  cancelText?: string;
+  onOk?: () => void;
+  onCancel?: () => void;
+}
+
+export default function Modal({
+  title,
+  children,
+  open,
+  okText = "OK",
+  cancelText,
+  onOk = () => {},
+  onCancel = () => {},
+}: ModalProps) {
+  return (
+    open && (
+      <div className="z-999 fixed left-0 top-0 flex h-full w-full items-center justify-center bg-black bg-opacity-50 py-10">
+        <div className="max-h-full w-full max-w-xl overflow-y-auto sm:rounded-2xl bg-white">
+          <div className="w-full">
+            <div className="mx-auto my-20 max-w-[400px] flex flex-col gap-5">
+              <h1 className="text-5xl font-extrabold text-center">{title}</h1>
+              <div className="text-xl leading-relaxed text-center">
+                {children}
+              </div>
+              <div className="flex flex-row items-stretch gap-4">
+                {cancelText && (
+                  <Button
+                    color="red"
+                    className="grow"
+                    onClick={() => onCancel()}
+                  >
+                    <h3>{cancelText}</h3>
+                  </Button>
+                )}
+                {okText && (
+                  <Button className="grow" onClick={() => onOk()}>
+                    <h3>{okText}</h3>
+                  </Button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  );
+}
diff --git a/src/css/custom.css b/src/css/custom.css
index 11c4b29..38cf792 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -15,7 +15,7 @@
   letter-spacing: -0.095em;
 }
 
-.announcementBar_node_modules-\@docusaurus-theme-classic-lib-theme-AnnouncementBar-styles-module {
+/*#announcementBar {
   @apply h-60 !important;
   @apply m-7;
   @apply p-7;
@@ -27,6 +27,7 @@
   @apply shadow-neoyellow;
   font-family: 'Lexend Mega', sans-serif;
 }
+*/
 
 .close {
   opacity: 1 !important;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index ae3e0bf..a8fb16d 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -10,6 +10,8 @@ import styles from "./index.module.css";
 import Frame from "../components/Frame";
 import Button from "../components/Button";
 import CodeFrame from "../components/CodeFrame";
+import Dialog from "../components/Dialog";
+import Modal from "../components/Modal";
 
 const dynC = (className: string, color: string) =>
   `dark:${className}-dark${color} ${className}-light${color}`;
@@ -53,8 +55,30 @@ function HomepageHeader() {
 
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
+  const [disclaimerOpen, setDisclaimerOpen] = React.useState(true);
+  const message = "";
   return (
     <div className="container">
+      <div className="absolute left-1/2 top-1/2">
+        <Modal
+          open={disclaimerOpen}
+          okText="Continue on my own"
+          onOk={() => setDisclaimerOpen(!disclaimerOpen)}
+          title="Greetings traveller!"
+        >
+          You probably found this site by accident. It is far from finished, but
+          if you're curious about the project.{" "}
+          <b>It's dangerous to go alone!</b>
+          <a
+            className="text-lightsecondary hover:underline hover:decoration-wavy underline-offset-4 py-4 block"
+            href="https://discord.com/invite/wDj3UYzec8"
+            target="_blank"
+            onClick={() => setDisclaimerOpen(!disclaimerOpen)}
+          >
+            <h3>JOIN THE DISCORD SERVER!</h3>
+          </a>
+        </Modal>
+      </div>
       <Layout description={`${siteConfig.tagline}`}>
         <HomepageHeader />
         <main>
diff --git a/tailwind.config.js b/tailwind.config.js
index 5a50e5e..b0639a8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -55,6 +55,9 @@ module.exports = {
         neoyellow: borderedShadow(8, colors.yellow["400"]),
         neoviolet: borderedShadow(8, colors.violet["400"]),
       },
+      zIndex: {
+        999: 999,
+      },
       colors: {
         codeBg: "#2D2A55",
         ...light,