create base Message component and add react icons

client/package.json

@@ -14,6 +14,7 @@
     "react": "^18.2.0",
     "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.4.0",
     "react-router-dom": "^6.3.0"
   },
   "devDependencies": {

client/pnpm-lock.yaml

@@ -11,6 +11,7 @@ specifiers:
   react: ^18.2.0
   react-cookie: ^4.1.1
   react-dom: ^18.2.0
+  react-icons: ^4.4.0
   react-router-dom: ^6.3.0
   sass: ^1.54.8
   tailwindcss: ^3.1.8
@@ -23,6 +24,7 @@ dependencies:
   react: 18.2.0
   react-cookie: 4.1.1_react@18.2.0
   react-dom: 18.2.0_react@18.2.0
+  react-icons: 4.4.0_react@18.2.0
   react-router-dom: 6.3.0_biqbaboplfbrettd7655fr4n2y
 
 devDependencies:
@@ -32,7 +34,7 @@ devDependencies:
   autoprefixer: 10.4.8_postcss@8.4.16
   postcss: 8.4.16
   sass: 1.54.8
-  tailwindcss: 3.1.8
+  tailwindcss: 3.1.8_postcss@8.4.16
   typescript: 4.7.4
   vite: 3.0.7_sass@1.54.8
 
@@ -1180,6 +1182,14 @@ packages:
       scheduler: 0.23.0
     dev: false
 
+  /react-icons/4.4.0_react@18.2.0:
+    resolution: {integrity: sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==}
+    peerDependencies:
+      react: '*'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /react-is/16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
     dev: false
@@ -1308,10 +1318,12 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /tailwindcss/3.1.8:
+  /tailwindcss/3.1.8_postcss@8.4.16:
     resolution: {integrity: sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==}
     engines: {node: '>=12.13.0'}
     hasBin: true
+    peerDependencies:
+      postcss: ^8.0.9
     dependencies:
       arg: 5.0.2
       chokidar: 3.5.3

client/src/App.tsx

@@ -2,8 +2,7 @@ import { BrowserRouter, Navigate, Outlet, Route, Routes } from 'react-router-dom
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import Login from './routes/login';
 import Home from './routes/home';
-import { ProvideAuth } from './controllers/Auth';
+import { CookiesProvider, useCookies } from 'react-cookie';
-import { Cookies, CookiesProvider, useCookies } from 'react-cookie';
 import Signup from './routes/signup';
 import { useEffect, useState } from 'react';
 

client/src/components/AppHeader.tsx

@@ -35,10 +35,10 @@ const AppHeader = () => {
   };
 
   return (
-    <>
+    <header>
       <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" />
+          <img src={logo} alt="logo" className='h-14'/>
         </div>
         <div className="right">
           <div className="flex items-center space-x-6">
@@ -59,7 +59,7 @@ const AppHeader = () => {
           </div>
         </div>
       </div>
-    </>
+    </header>
   );
 };
 

client/src/components/Message.tsx

@@ -0,0 +1,26 @@
+import { FaEllipsisH } from 'react-icons/fa';
+
+const Message = ({ text, user, date }: any) => {
+  const initials = user.firstName[0] + user.lastName[0];
+  return (
+    <>
+      <div className="flex bg-grey-dark rounded-xl max-w-3xl p-5 gap-5">
+        <div className="avatar rounded-full bg-red-light w-20 p-3 aspect-square h-fit">
+          <span className="text-grey-dark text-xl">{initials}</span>
+        </div>
+        <div className="flex flex-col gap-2">
+          <div className="flex justify-between">
+            <div className="text-red-light text-xl username">
+              {user.firstName} {user.lastName}
+            </div>
+            <div className="text-grey-light popup-btn text-2xl"><FaEllipsisH/></div>
+          </div>
+          <div className="text-white message">{text}</div>
+          <div className="text-grey-light date">{date}</div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Message;

client/src/routes/home.tsx

@@ -1,10 +1,24 @@
 import AppHeader from "@components/AppHeader";
+import Message from "@components/Message";
 
 const Home = () => {
+  const user = {
+    firstName: "Guillaume",
+    lastName: "Dorce",
+  };
+
   return (
-    <>
+    <div className="min-h-full bg-grey">
       <AppHeader />
-    </>
+      <main className="flex flex-col items-center p-4">
+        <Message user={user} text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget
+        aliquam tincidunt, nisl nisl aliquet nisl, eget aliquam nisl nisl sit amet
+        mauris. Donec auctor, nisl eget aliquam tincidunt, nisl nisl aliquet nisl, eget
+        aliquam nisl nisl sit amet mauris. Donec auctor, nisl eget aliquam tincidunt,
+        nisl nisl aliquet nisl, eget aliquam nisl nisl sit amet mauris." date="14 août 2022 19:00"/>
+        
+      </main>
+    </div>
   );
 }
 

client/tsconfig.json

@@ -19,6 +19,15 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ],
+      "@components/*": [
+        "src/components/*"
+      ],
+    }
   },
   "include": [
     "src"