message like

client/src/components/AppHeader.tsx

@@ -34,7 +34,7 @@ const AppHeader = () => {
   };
 
   return (
-    <header className="sticky top-0">
+    <header className="sticky top-0 z-100">
       <div className="min-h-80 flex items-center justify-between bg-grey-dark p-2">
         <div className="app-header__logo">
           <img src={logo} alt="logo" className="h-14" />

client/src/components/Avatar.tsx

@@ -13,7 +13,7 @@ const Avatar = ({ user }: any) => {
     }
   });
 
-  return <img src={avatar} alt="avatar" className={'rounded-full w-16 h-16'} />;
+  return <img src={avatar} alt="avatar" className='rounded-full w-16 h-16 cursor-pointer' />;
 };
 
 export default Avatar;

client/src/components/Message.tsx

@@ -1,30 +1,53 @@
-import { FaEllipsisH } from 'react-icons/fa';
+import { FaEllipsisH, FaThumbsUp } from 'react-icons/fa';
 import Avatar from '@components/Avatar';
 
-const Message = ({ text, user, date, image = '' }: any) => {
+const Image = ({ image }: {image: string}) => {
+  if (image === '') {
+    return null;
+  }
+
+  return (
+    <div className="flex justify-center ">
+      <img src={image} alt="image" className="w-full rounded-lg cursor-pointer" />
+    </div>
+  );
+};
+
+const Text = ({ text }: {text: string}) => {
+  if (text === '') {
+    return null;
+  }
+  return <div className="text-white message">{text}</div>;
+};
+
+const Likes = ({ likes }: {likes: number}) => {
+  return (
+    <div className="absolute -bottom-10 right-0 mb-2 rounded-full bg-grey-dark shadow-lg shadow-slate-900 cursor-pointer">
+      <FaThumbsUp className="fill-red-light text-xl  w-10 h-10 p-2.5" />
+    </div>
+  );
+};
+
+const Message = ({ text = '', user, date, image = '' }: any) => {
   return (
     <>
-      <div className="flex bg-grey-dark rounded-xl max-w-3xl p-5 gap-5">
+      <div className="flex bg-grey-dark rounded-xl max-w-3xl p-5 gap-5 shadow-md shadow-grey-dark">
         {user && <Avatar user={user} />}
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2 relative">
           <div className="flex justify-between">
             <div className="text-red-light text-xl username">
               {user.firstName} {user.lastName}
             </div>
-            <div className="text-grey popup-btn text-2xl">
+            <div className="text-grey popup-btn text-2xl cursor-pointer">
               <FaEllipsisH className="fill-grey-light" />
             </div>
           </div>
-          <div className="text-white message">{text}</div>
+          <Text text={text} />
-          {image === '' ? (
+          <Image image={image} />
-            ''
-          ) : (
-            <div className="flex justify-center">
-              <img src={image} alt="image" className="w-full" />
-            </div>
-          )}
           <div className="text-grey-light date">{date}</div>
+          <Likes likes={2} />
         </div>
+        
       </div>
     </>
   );

client/src/routes/home.tsx

@@ -29,6 +29,11 @@ const Home = () => {
           date="14 août 2022 19:00"
           image="https://picsum.photos/800/600"
         />
+        <Message
+          user={user}
+          date="14 août 2022 19:00"
+          image="https://picsum.photos/1200/800"
+        />
       </main>
     </div>
   );

client/tailwind.config.cjs

@@ -12,7 +12,13 @@ module.exports = {
         'grey-light': '#717695',
         'grey-dark': '#2E3144',
       },
+      zIndex: {
+        '100': '100',
+      },
+      padding: {
+        '2.5': '0.625rem',
+      },
     },
   },
   plugins: [],
-};
+}