modal popup

client/src/components/Modal.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+const Modal = ({ children, show }: { children: ReactNode; show: boolean }) => {
+  return (
+    <div
+      className={
+        'modal overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 bottom-0 w-full h-full z-1000 flex justify-center items-center' +
+        (show ? '' : ' hidden')
+      }
+    >
+      <div className="absolute w-full h-full top-0 left-0 bg-grey opacity-40"></div>
+      <div className="relative rounded-lg shadow dark:bg-grey-dark p-4">{children}</div>
+    </div>
+  );
+};
+
+export default Modal;

client/src/components/PopupMessage.tsx

@@ -1,13 +1,18 @@
 import { useEffect, useState } from 'react';
 import { FaEllipsisH } from 'react-icons/fa';
+import Modal from './Modal';
 
 const PopupMessage = ({ id }: { id: string }) => {
   const [show, setShow] = useState(false);
+  const [showEdit, setShowEdit] = useState(false);
+  const [showDelete, setShowDelete] = useState(false);
 
   useEffect(() => {
     const handleClick = (e: any) => {
-      console.log(show && e.target.closest('.popup-btn'));
+      if (
-      if ((show && !e.target.closest('.popup-btn') || (e.target.closest('.popup') && !e.target.closest('.popup-btn')))) {
+        (show && !e.target.closest('.popup-btn')) ||
+        (e.target.closest('.popup') && !e.target.closest('.popup-btn'))
+      ) {
         setShow(false);
       }
     };
@@ -25,12 +30,45 @@ const PopupMessage = ({ id }: { id: string }) => {
           <FaEllipsisH className="fill-grey-light hover:fill-grey-dark transition-all text-xl w-10 h-10 p-2.5" />
         </div>
       </div>
-      <div className={'popup absolute z-10 right-0 top-8 bg-grey-dark shadow-lg shadow-slate-900 rounded-xl p-2' + (show ? '' : ' hidden')}>
+      <div
+        className={
+          'popup absolute z-10 right-0 top-8 bg-grey-dark shadow-lg shadow-slate-900 rounded-xl p-2' +
+          (show ? '' : ' hidden')
+        }
+      >
         <div className="popup-content space-y-2">
-          <div className="popup-item text-white rounded-xl p-2 transition-all hover:cursor-pointer hover:bg-grey-light hover:text-grey-dark">Modifier</div>
+          <button
-          <div className="popup-item text-red rounded-xl p-2 transition-all hover:cursor-pointer hover:text-white hover:bg-red">Supprimer</div>
+            className="popup-item block text-white rounded-xl p-2 transition-all hover:cursor-pointer hover:bg-grey-light hover:text-grey-dark"
+            onClick={() => setShowEdit(!showEdit)}
+          >
+            Modifier
+          </button>
+          <button
+            className="popup-item block text-red rounded-xl p-2 transition-all hover:cursor-pointer hover:text-white hover:bg-red"
+            onClick={() => setShowDelete(!showDelete)}
+          >
+            Supprimer
+          </button>
         </div>
       </div>
+      <Modal show={showEdit}>
+        <div className="text-white">Modifier</div>
+      </Modal>
+      <Modal show={showDelete}>
+        <div className="text-white mb-2">Voulez vous vraiment supprimer ce message ?</div>
+        <button
+            className="popup-item bg-red text-white border-red border-2 rounded-xl p-2 mr-2 transition-all hover:cursor-pointer hover:bg-white hover:text-red"
+            onClick={() => setShowDelete(!showDelete)}
+          >
+            Supprimer
+          </button>
+          <button
+            className="popup-item text-grey-light rounded-xl p-2 transition-all hover:cursor-pointer hover:bg-grey-light hover:text-grey-dark"
+            onClick={() => setShowDelete(!showDelete)}
+          >
+            Annuler
+          </button>
+      </Modal>
     </>
   );
 };

client/tailwind.config.cjs

@@ -14,6 +14,7 @@ module.exports = {
       },
       zIndex: {
         '100': '100',
+        '1000': '1000',
       },
       padding: {
         '2.5': '0.625rem',