Add Modal

dev-bazz · Nov 15, 2022 · 8caa2bc · 8caa2bc · vercel · Nov 15, 2022
1 parent c59467c
commit 8caa2bc
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 20 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -16,37 +16,27 @@ function App() {
 
   const modal = useRef();
   function handleModal() {
-    DOMMethods.showModal(modal.current)
+    modal.current.showModal()
   }
   function handleClose() {
-    DOMMethods.closeModal(modal.current)
+    modal.current.close()
   }
 
   return (
     <>
       <Router>
 
-        <Nav />
+        <Nav handleModal={handleModal} />
 
         <Routes >
 
           <Route path='/' element={<Home />} />
           <Route path='NFTs' element={<Nft />} />
 
         </Routes>
-        {/* <Dialog modal={modal} >
-          <div className="modal__header">
-            <h3>Connect Wallet</h3>
-            <div className="close" onClick={() => handleClose()}>
-              <Icons name={`cross`} />
-            </div>
-          </div>
-          <div className="modal__body">
-            <p>Choose your preferred wallet:</p>
-            <LinkBTN name={`meta-fox`} text={`Metamask`} />
-            <LinkBTN name={`wallet`} text={`WalletConnect`} />
-          </div>
-        </Dialog> */}
+
+        <Dialog modal={modal} handleClose={handleClose} /> 
+
         <Footer />
 
       </Router>

diff --git a/src/App/component/Dialog.jsx b/src/App/component/Dialog.jsx
@@ -1,9 +1,23 @@
+import Icons from "../../assets/icons/Icons";
+import LinkBTN from "./LinkBTN";
 
 
-export default function Dialog({modal, children}) {
+export default function Dialog({ modal, children , handleClose}) {
         return (
-                <dialog className="modal"  ref={modal}>
-                                {children}
-                        </dialog>
+                <dialog className="modal" ref={modal}>
+                        <div className="modal__header">
+                                <h3>Connect Wallet</h3>
+                                <div className="close" onClick={() => handleClose()}>
+                                        <Icons name={`cross`} />
+
+                                </div>
+                        </div>
+                        <div className="modal__body">
+                                <p>Choose your preferred wallet:</p>
+                                <LinkBTN name={`meta-fox`} text={`Metamask`} />
+                                <LinkBTN name={`wallet`} text={`WalletConnect`} />
+
+                        </div>
+                </dialog>
         )
 }