add popup menu

client/src/components/Message.tsx

@@ -1,5 +1,6 @@
-import { FaEllipsisH, FaThumbsUp } from 'react-icons/fa';
+import { FaThumbsUp } from 'react-icons/fa';
 import Avatar from '@components/Avatar';
+import PopupMessage from './PopupMessage';
 
 const Image = ({ image }: {image: string}) => {
   if (image === '') {
@@ -29,6 +30,7 @@ const Likes = ({ likes }: {likes: number}) => {
 };
 
 const Message = ({ text = '', user, date, image = '' }: any) => {
+  const id = '1'; // replace with real id in the future
   return (
     <>
       <div className="flex bg-grey-dark rounded-xl max-w-3xl p-5 gap-5 shadow-md shadow-grey-dark">
@@ -38,9 +40,7 @@ const Message = ({ text = '', user, date, image = '' }: any) => {
             <div className="text-red-light text-xl username">
               {user.firstName} {user.lastName}
             </div>
-            <div className="text-grey popup-btn text-2xl cursor-pointer">
+            <PopupMessage id={id} />
-              <FaEllipsisH className="fill-grey-light" />
-            </div>
           </div>
           <Text text={text} />
           <Image image={image} />

client/src/components/PopupMessage.tsx

@@ -0,0 +1,28 @@
+import { useState } from "react";
+import { FaEllipsisH } from "react-icons/fa";
+
+const PopupMessage = ({id}: {id: string}) => {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => {
+    setShow(false);
+  };
+
+  return (
+    <div className="bg-grey-dark">
+      <div className="popup-btn text-2xl cursor-pointer" onClick={() => setShow(!show)}>
+        <FaEllipsisH className="fill-grey-light" />
+      </div>
+      {show && (
+        <div className="popup">
+          <div className="popup-content">
+            <div className="popup-item">Edit</div>
+            <div className="popup-item">Delete</div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PopupMessage;