restructurize app and add header component

client/src/components/AppHeader.tsx

@@ -0,0 +1,26 @@
+import logo from '@assets/images/logo.svg';
+
+const AppHeader = () => {
+  return (
+    <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" />
+      </div>
+      <div className="right">
+        <div className="flex items-center space-x-6">
+          <div className="rounded-full w-24 overflow-hidden">
+            <img src="https://randomuser.me/api/portraits/women/72.jpg" alt="avatar" />
+          </div>
+          <div className="app-header__user__name">
+            <span className="text-white">John Doe</span>
+          </div>
+          <button className="group relative flex w-auto justify-center rounded-md border border-red bg-red py-2 px-2 text-sm font-medium text-white hover:bg-white hover:text-red focus:outline-none focus:ring-2 focus:ring-red focus:ring-offset-2">
+            Deonnexion
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AppHeader;

client/src/routes/home.tsx

@@ -1,5 +1,6 @@
 import { useCookies } from "react-cookie";
 import { Navigate } from "react-router-dom";
+import AppHeader from "@components/AppHeader";
 
 const Home = () => {
   const [cookie, setCookie] = useCookies(["token"]);
@@ -9,9 +10,9 @@ const Home = () => {
   }
   
   return (
-    <div>
-      <h1>Home</h1>
-    </div>
+    <>
+      <AppHeader />
+    </>
   );
 }
 

client/src/routes/login.tsx

@@ -3,6 +3,7 @@ import logo from '@assets/images/logo.svg';
 import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
 import { useCookies } from 'react-cookie';
+import type { Token } from '../types';
 
 const Login = () => {
   const [cookie, setCookie] = useCookies(['token']);
@@ -23,7 +24,7 @@ const Login = () => {
       return response.json();
     },
     {
-      onSuccess: (data) => {
+      onSuccess: (data: Token) => {
         setCookie('token', data.token, { path: '/', expires: new Date(data.expiresAt) });
         return <Navigate to="/home" />;
       },

client/src/types/index.d.ts

@@ -0,0 +1,7 @@
+type Token = {
+  userId: number;
+  token: string;
+  expiresAt: Date;
+};
+
+export { Token };