From 06264f12cc168c73477f56a463613ec8fdf85bfa Mon Sep 17 00:00:00 2001
From: No0ne003 <hi.yassir.op@gmail.com>
Date: Mon, 29 Apr 2024 22:18:37 +0100
Subject: [PATCH] Custom Modal Popup

---
 src/App.jsx                               |  3 +++
 src/data/projects.js                      |  5 +++++
 src/pages/CustomModalPopup/Modal.jsx      | 19 +++++++++++++++++++
 src/pages/CustomModalPopup/ModalPopup.jsx | 23 +++++++++++++++++++++++
 4 files changed, 50 insertions(+)
 create mode 100644 src/pages/CustomModalPopup/Modal.jsx
 create mode 100644 src/pages/CustomModalPopup/ModalPopup.jsx

diff --git a/src/App.jsx b/src/App.jsx
index df29555..771784d 100644
--- a/src/App.jsx
+++ b/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 />} />
diff --git a/src/data/projects.js b/src/data/projects.js
index c61e487..d3184f4 100644
--- a/src/data/projects.js
+++ b/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',
   }
 ];
 
diff --git a/src/pages/CustomModalPopup/Modal.jsx b/src/pages/CustomModalPopup/Modal.jsx
new file mode 100644
index 0000000..99d38ae
--- /dev/null
+++ b/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>
+}
diff --git a/src/pages/CustomModalPopup/ModalPopup.jsx b/src/pages/CustomModalPopup/ModalPopup.jsx
new file mode 100644
index 0000000..47dfd24
--- /dev/null
+++ b/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>
+  );
+};