Introduce Modal Closing

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.

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>
     );