Custom Modal Popup

src/App.jsx

@@ -16,6 +16,7 @@ import TreeView from "./pages/tree-view/TreeView";
 import QRCodeGenerator from "./pages/QRCodeGenerator";
 import LightDarkMode from "./pages/light-dark-mode/Light-dark-mode";
 import TabTest from "./pages/tree-view/custom-tabs/Tab-test";
+import { ModalPopup } from "./pages/CustomModalPopup/ModalPopup";
 
 function App() {
   return (
@@ -47,6 +48,8 @@ function App() {
           <Route path='light-dark-mode' element={<LightDarkMode />} />
           {/* Custom tabs component */}
           <Route path="custom-tabs" element={<TabTest />} />
+          {/* Custom Modal Popup */}
+          <Route path='modal-popup' element={<ModalPopup />} />
 
           {/* Error Page */}
           <Route path="*" element={<NotFound />} />

src/data/projects.js

@@ -43,6 +43,11 @@ export const projects = [
     id: 9,
     name: 'Custom Tabs',
     path: 'custom-tabs',
+  },
+  {
+    id: 10,
+    name: 'Modal Popup',
+    path: 'modal-popup',
   }
 ];
 

src/pages/CustomModalPopup/Modal.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+export const Modal = ({id, header, body, onClose}) => {
+  return <div id={id || 'Modal'} className='fixed w-screen h-fit z-50 flex justify-center items-center top-1/2'>
+    <div className='bg-gr px-6 py-2'>
+      <header className='flex items-center px-2 py-3 justify-between'>
+        <h3 className='text-xl'>{header ? header : 'Header'}</h3>
+        <span onClick={onClose} className='text-rose-500 cursor-pointer'>&times;</span>
+      </header>
+      <div className='px-2 py-3 text-sm'>
+        {
+          body ? body : <div>
+            <p>This is our Modal Body</p>
+          </div>
+        }
+      </div>
+    </div>
+  </div>
+}

src/pages/CustomModalPopup/ModalPopup.jsx

@@ -0,0 +1,23 @@
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import { Modal } from "./Modal";
+
+export const ModalPopup = () => {
+  const [showModalPopup, setShowModalPopup] = useState(false)
+
+  function handleToggleModalPopup() {
+    setShowModalPopup(!showModalPopup)
+  }
+  function onClose(){
+    setShowModalPopup(false)
+  }
+
+  return (
+    <div className="flex flex-col gap-3 justify-start items-center py-5">
+      <Button onClick={handleToggleModalPopup} >Open Modal Popup</Button>
+      {
+        showModalPopup && <Modal onClose={onClose} body={<div>Customized Body</div>} />
+      }
+    </div>
+  );
+};