From 998affb0563789cf51fc3858be4e084219957eb4 Mon Sep 17 00:00:00 2001
From: Lucemans <luc@lucemans.nl>
Date: Sat, 1 Jun 2024 18:06:09 +0300
Subject: [PATCH] Introduce Modal Closing

---
 src/components/modals/CreateVault.tsx |  2 +-
 src/components/modals/modal.tsx       | 21 +++++++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/modals/CreateVault.tsx b/src/components/modals/CreateVault.tsx
index 4dce2df..8fb7396 100644
--- a/src/components/modals/CreateVault.tsx
+++ b/src/components/modals/CreateVault.tsx
@@ -7,7 +7,7 @@ export const CreateVault: FC<{ onClose: () => void }> = ({ onClose }) => {
     const { address } = useAccount();
 
     return (
-        <Modal>
+        <Modal onCloseRequest={onClose}>
             <div>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
                 iaculis magna efficitur, ultricies mi sed, malesuada turpis.
diff --git a/src/components/modals/modal.tsx b/src/components/modals/modal.tsx
index 439c779..7434e60 100644
--- a/src/components/modals/modal.tsx
+++ b/src/components/modals/modal.tsx
@@ -1,10 +1,23 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import { FC, PropsWithChildren } from "react";
 
-export const Modal: FC<PropsWithChildren> = ({ children }) => {
+export const Modal: FC<
+    PropsWithChildren<{
+        dismissOnBgClick?: boolean;
+        onCloseRequest?: () => void;
+    }>
+> = ({ children, onCloseRequest, dismissOnBgClick = true }) => {
     return (
-        <div className="bg-background-disabled/25 fixed inset-0 z-50 overflow-y-auto backdrop-blur-sm">
-            <div className="flex justify-center px-4 py-12 md:py-32">
-                <div className="card w-full max-w-96 p-4">{children}</div>
+        <div className="fixed inset-0 z-50 overflow-y-auto">
+            <div
+                className="relative"
+                onClick={dismissOnBgClick ? onCloseRequest : undefined}
+            >
+                <div className="bg-background-disabled/25 absolute inset-0 -z-10 overflow-y-auto backdrop-blur-sm"></div>
+                <div className="z-10 flex justify-center px-4 py-12 md:py-32">
+                    <div className="card w-full max-w-96 p-4">{children}</div>
+                </div>
             </div>
         </div>
     );