Feat/add modal in cards

homepage/package.json

@@ -28,6 +28,7 @@
     "decap-cms-app": "^3.0.5",
     "next": "^13.2.3",
     "react": "^18.2.0",
+    "react-bootstrap": "bs4",
     "react-dom": "^18.2.0",
     "react-markdown": "^8.0.7",
     "rehype-raw": "^7.0.0",

homepage/public/css/style.css

@@ -212,13 +212,13 @@ h6 {
 .margin-3-percent {
   margin: 3%;
 }
-.btn {
+/* .btn {
   background: #1ea6b9 0% 0% no-repeat padding-box;
   border-radius: 10px;
   text-align: center;
   letter-spacing: 2.7px;
   color: #ffffff;
-}
+} */
 .section-main .four-items .box {
   background: #fefefe 0% 0% no-repeat padding-box;
   box-shadow: 3px 0.52px 10px #2b120229;

homepage/src/components/cards/cardModal.jsx

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import Modal from 'react-bootstrap/Modal';
+import Button from 'react-bootstrap/Button';
+import { ParseMarkdownAndHtml } from '../parseMarkdownAndHtml';
+
+function CardModal({ card }) {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  return (
+    <>
+      <Button variant="light" onClick={handleShow}>
+        More...
+      </Button>
+
+      <Modal show={show} onHide={handleClose}>
+        <Modal.Header closeButton></Modal.Header>
+        <Modal.Body>
+          <div
+            className="col-md-6 col-xl-4 mb-3"
+            id={card.data.id}
+            style={{ maxWidth: '100%' }} // fix card modal content size
+          >
+            <div
+              className="section-main"
+              style={{ border: `1rem solid ${card.data.color.background}` }}
+            >
+              <h3>{card.data.title}</h3>
+              <div className="d-flex flex-column">
+                <div className="d-flex flex-wrap mb-3 justify-content-evenly">
+                  {card.data.avatarList.map((avatar) => (
+                    <div
+                      key={avatar.data.title}
+                      className="col-3 avatar avatar-list"
+                      style={{
+                        backgroundColor: `${avatar.data.color.background}`,
+                        border: `3px solid ${avatar.data.color.border}`,
+                      }}
+                    >
+                      <div
+                        style={{
+                          backgroundImage: `url(${avatar.data.image})`,
+                        }}
+                      >
+                        &nbsp;
+                      </div>
+                    </div>
+                  ))}
+                </div>
+                <strong className="mb-3">{card.data.description}</strong>
+                <ParseMarkdownAndHtml markdown={true}>
+                  {card.content}
+                </ParseMarkdownAndHtml>
+              </div>
+            </div>
+          </div>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+}
+
+export default CardModal;

homepage/src/components/cards/projectCard.jsx

@@ -1,4 +1,5 @@
 import { ParseMarkdownAndHtml } from '../parseMarkdownAndHtml';
+import CardModal from './cardModal';
 
 const ProjectCard = ({ card }) => (
   <div className="col-md-6 col-xl-4 mb-3" id={card.data.id}>
@@ -29,9 +30,10 @@ const ProjectCard = ({ card }) => (
           ))}
         </div>
         <strong className="mb-3">{card.data.description}</strong>
-        <ParseMarkdownAndHtml markdown={true}>
+        {/* <ParseMarkdownAndHtml markdown={true}>
           {card.content}
-        </ParseMarkdownAndHtml>
+        </ParseMarkdownAndHtml> */}
+        <CardModal card={card} />
       </div>
     </div>
   </div>