display picture when click on it

client/src/components/Avatar.tsx

@@ -1,13 +1,11 @@
 import gravatar from 'gravatar';
 import { useState } from 'react';
+import Image from './Image';
 
 const Avatar = ({ user }: any) => {
-  // console.log(user);
-  
   const initials = user.firstName[0] + user.lastName[0];
   const gravatarUrl = gravatar.url(user.email, { s: '64', r: 'x', d: '404' }, true);
   const avatarUi = `https://ui-avatars.com/api/?name=${initials}&background=0D8ABC&color=fff&size=64`;
-  // const avatarUi = `https://ui-avatars.com/api/?name=GD&background=0D8ABC&color=fff&size=64`;
   const [avatar, setAvatar] = useState(avatarUi);
   const [firstLoad, setFirstLoad] = useState(true);
 
@@ -22,7 +20,7 @@ const Avatar = ({ user }: any) => {
 
   return (
     <div className="avatar shrink-0">
-      <img src={avatar} alt="avatar" className="rounded-full w-12 h-12 md:w-16 md:h-16 transition-all cursor-pointer" />
+      <Image src={avatar} alt="avatar" className="rounded-full w-12 h-12 md:w-16 md:h-16 transition-all cursor-pointer" />
     </div>
   );
 };

client/src/components/Image.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { FaTimes } from 'react-icons/fa';
+import Modal from './Modal';
+
+const Image = ({ src, alt, className }: { src: string; alt?: string; className?: string }) => {
+  const [error, setError] = useState(false);
+  const [modal, setModal] = useState(false);
+
+  const onError = () => {
+    if (!error) {
+      setError(true);
+    }
+  };
+
+  const onClick = () => {
+    setModal(true);
+  };
+
+  return (
+    <>
+      {modal && (
+        <div onClick={() => setModal(false)}>
+          <Modal show={modal} className="w-auto flex flex-col items-end max-w-[80%]">
+            <FaTimes
+              className="fill-grey-light hover:fill-grey-dark hover:bg-grey-light cursor-pointer transition-all text-xl w-10 h-10 p-2.5 rounded-md"
+              onClick={() => setModal(!modal)}
+            />
+            <img
+              src={error ? 'https://via.placeholder.com/150' : src}
+              alt={alt}
+              onError={onError}
+              className={className}
+            />
+          </Modal>
+        </div>
+      )}
+      <img
+        src={error ? 'https://via.placeholder.com/150' : src}
+        alt={alt}
+        onError={onError}
+        className={className}
+        onClick={onClick}
+      />
+    </>
+  );
+};
+
+export default Image;

client/src/components/Message.tsx

@@ -5,18 +5,7 @@ import { getMeInfo } from '@controllers/UserController';
 import { useQuery } from '@tanstack/react-query';
 import { toastError } from '@controllers/Toasts';
 import User from './User';
-
-const Image = ({ image }: { image: string }) => {
-  if (image === '' || image === null) {
-    return null;
-  }
-
-  return (
-    <div className="flex justify-center ">
-      <img src={image} alt="image" className="w-full rounded-lg cursor-pointer" />
-    </div>
-  );
-};
+import Image from './Image';
 
 const Text = ({ text }: { text: string }) => {
   if (text === '') {
@@ -50,7 +39,7 @@ const Message = ({ message }: any) => {
             ) : null}
           </div>
           <Text text={message.content} />
-          <Image image={message.image} />
+          {message.image && <Image src={message.image} alt="image" className="w-fit rounded-lg cursor-pointer" />}
           <div className="text-grey-light date">
             {new Date(message.createdAt).toLocaleDateString(undefined, {
               year: 'numeric',