modal:built the modal popup

Author: veiled-coder

src/App.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import "../src/styles/styles.css";
 import Nav from "./Nav";
 import Homepage from "./components/Homepage";
@@ -7,12 +7,46 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Place from "./components/Place";
 
 function App() {
+  const overlay = {
+    background: "rgba(64, 64, 64, 0.3)",
+    position: "fixed",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 6,
+  };
+  const modal = {
+    position: "fixed",
+    background: "white",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%,-50%)",
+    zIndex: 6,
+
+    width: "50%",
+    height: "50%",
+    display: 'flex',
+    flexDirection: 'column',
+    padding:'1rem'
+  };
+  const [showModal, setshowModal] = useState(false);
   return (
     <Router>
       <>
-        <Nav />
+        {showModal ? (
+          <div style={overlay}>
+            <div style={modal}>
+              <button onClick={() => setshowModal(false)}>CLOSE MODAL</button>
+            </div>
+          </div>
+        ) : (
+          ""
+        )}
+        <Nav setshowModalTrue={() => setshowModal(true)} />
         <Routes>
           <Route path="/" element={<Homepage />} />
+
           <Route path="/place" element={<Place />} />
         </Routes>
         <Footer />

src/Nav.js

@@ -6,9 +6,11 @@ import logo from "../src/images/meta.png";
 import Button from "./components/Button";
 import { faBars } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router-dom';
+
+
+function Nav({setshowModalTrue}) {
 
-function Nav() {
   return (
     <section className="nav--container grid">
       <div className="nav-section_content">
@@ -26,8 +28,8 @@ function Nav() {
         </nav>
         <div>
           {" "}
-          <Button name="Connect wallet" styleclass="nav-btn" />
-        </div>
+          <Button name="Connect wallet" styleclass="nav-btn" clicked={setshowModalTrue} />
+                </div>
         <div className="hamburger-menu">
           <FontAwesomeIcon icon={faBars} className="hamburger-menu" />
         </div>

src/components/Button.js

@@ -1,9 +1,8 @@
 import React from "react";
-import "../styles/button.css"
+import "../styles/button.css";
 
-function Button({name,styleclass,children}) {
-  return <button className={`btn ${styleclass}`}>{name}
-    {children}</button>;
+function Button({ name, styleclass,clicked }) {
+  return <button onClick={clicked} className={`btn ${styleclass}`}>{name}</button>;
 }
 
 export default Button;

src/styles/nav.css

@@ -7,6 +7,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-wrap:wrap ;
 }
 .logo--container {
   display: flex;

src/styles/styles.css

@@ -7,6 +7,7 @@
 }
 body {
   font-family: "Red Rose";
+  
 }
 :root {
   --purple: linear-gradient(90deg, #a02279 11.45%, #a02279 11.46%);
@@ -37,4 +38,3 @@ html {
 .purp {
   color: var(--purple);
 }
-