📦 NEW: popup box & added bio

Author: msaaddev

components/Card.js

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import styles from '../styles/Card.module.css';
 
-const Card = ({ url, name, pod, github, linkedin, more }) => {
+const Card = ({ url, name, pod, github, linkedin, bio, openPopupboxForPod }) => {
     const [podClass, setPodClass] = useState(styles.card);
     useEffect(() => {
         if (pod === true) {
@@ -44,11 +44,11 @@ const Card = ({ url, name, pod, github, linkedin, more }) => {
                 )}
             </div>
             <div className={styles.read_more_btn}>
-                <Link href={more} passHref={true}>
-                    <a>
-                        <button>Read More</button>
-                    </a>
-                </Link>
+                {/* <Link href={more} passHref={true}> */}
+                {/* <a> */}
+                <button onClick={() => openPopupboxForPod(bio)}>Read More</button>
+                {/* </a> */}
+                {/* </Link> */}
             </div>
         </div>
     );

components/Pod.js

@@ -3,7 +3,7 @@ import data from '../data/podMembers';
 import Card from './Card';
 import styles from '../styles/Pod.module.css';
 
-const Pod = () => {
+const Pod = ({ openPopupboxForPod }) => {
     const [podMembers] = useState(data);
 
     return (
@@ -16,9 +16,10 @@ const Pod = () => {
                         name={member.name}
                         github={member.github}
                         linkedin={member.linkedin}
-                        more={member.more}
+                        bio={member.bio}
                         pod={true}
                         key={Math.floor(Math.random() * 10000)}
+                        openPopupboxForPod={openPopupboxForPod}
                     />
                 ))}
             </div>

package-lock.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "next": "9.5.4",
     "react": "16.13.1",
-    "react-dom": "16.13.1"
+    "react-dom": "16.13.1",
+    "react-popupbox": "^2.0.8"
   }
 }

package.json

@@ -3,15 +3,36 @@ import Coding_Crow from '../components/Coding_Crow';
 import Pod_Leader from '../components/Pod_Leader';
 import Pod from '../components/Pod';
 import Footer from '../components/Footer';
+import { PopupboxManager, PopupboxContainer } from 'react-popupbox';
+import 'react-popupbox/dist/react-popupbox.css';
+
+// popup Box Body
+const openPopupboxForPod = bio => {
+    const content = (
+        <div className='popup' align='center'>
+            <h3 className='popup-title'>Who am i? </h3>
+            <p>{bio}</p>
+        </div>
+    );
+    PopupboxManager.open({ content });
+};
+
+// popup box configs
+const popupboxConfig = {
+    fadeIn: true,
+    fadeInSpeed: 400,
+    overlayOpacity: 0.5,
+};
 
 export default function Home() {
     return (
         <>
             <SEO />
             <Coding_Crow />
             <Pod_Leader />
-            <Pod />
+            <Pod openPopupboxForPod={openPopupboxForPod} />
             <Footer />
+            <PopupboxContainer {...popupboxConfig} />
         </>
     );
 }

pages/index.js

@@ -14,3 +14,24 @@ a {
 * {
     box-sizing: border-box;
 }
+
+.popupbox-wrapper {
+    width: 50%;
+    background-color: #2d2b55 !important;
+}
+
+.popupbox-content {
+    padding: 0 !important;
+}
+
+.popupbox-content h3 {
+    text-transform: uppercase !important;
+    color: #ffffff !important;
+}
+
+.popupbox-content p {
+    background-color: #ffffff;
+    margin: 0;
+    padding: 40px 40px;
+    font-family: 'Lora', serif;
+}