Rebuild

src/components/generic/Modal.tsx

@@ -1,33 +1,33 @@
 import type React from 'react';
 
-import { Dialog } from '@headlessui/react';
+import { m } from 'framer-motion';
+
 import { useAppSelector } from '@hooks/useAppSelector';
 
+// import { Backdrop } from './Backdrop';
+
 type DefaultDivProps = JSX.IntrinsicElements['div'];
 
 export interface ModalProps extends DefaultDivProps {
-  children: React.ReactNode;
-  open: boolean;
   onClose: () => void;
+  children: React.ReactNode;
 }
 
 export const Modal = ({
-  children,
-  open,
   onClose,
+  children,
   className,
   ...props
 }: ModalProps): JSX.Element => {
   const darkMode = useAppSelector((state) => state.app.darkMode);
+
   return (
-    <Dialog
-      as="div"
+    <m.div
       className={`fixed inset-0 z-30 ${darkMode ? 'dark' : ''}`}
-      open={open}
-      onClose={onClose}
+      onClick={onClose}
     >
-      <Dialog.Overlay className="fixed w-full h-full backdrop-filter backdrop-blur-sm" />
-      <div className="text-center ">
+      <m.div className="fixed h-full w-full backdrop-blur-sm backdrop-filter" />
+      <m.div className="text-center ">
         <span
           className="inline-block h-screen align-middle "
           aria-hidden="true"
@@ -37,7 +37,7 @@ export const Modal = ({
         <div className={`inline-block align-middle ${className}`} {...props}>
           {children}
         </div>
-      </div>
-    </Dialog>
+      </m.div>
+    </m.div>
   );
 };