feat: implement NextUI & header

package.json

@@ -9,7 +9,12 @@
 		"lint": "next lint"
 	},
 	"dependencies": {
+		"@nextui-org/navbar": "^2.2.7",
+		"@nextui-org/react": "^2.6.10",
+		"@nextui-org/system": "^2.4.5",
+		"@nextui-org/theme": "^2.4.4",
 		"axios": "^1.7.9",
+		"framer-motion": "^11.15.0",
 		"jsonwebtoken": "^9.0.2",
 		"moment": "^2.30.1",
 		"next": "15.0.3",

src/app/components/AppWrapper.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { NextUIProvider } from "@nextui-org/react";
+import { SessionProvider } from "next-auth/react";
+
+export default function AppWrapper({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<SessionProvider>
+			<NextUIProvider>{children}</NextUIProvider>
+		</SessionProvider>
+	);
+}

src/app/components/FetchApi.tsx

@@ -1,31 +0,0 @@
-"use client";
-import { axiosInstance } from "@/app/lib/axios";
-import { useState } from "react";
-
-export const FetchApi = () => {
-	const [date, setDate] = useState<string | null>(null);
-
-	const handleFetch = async () => {
-		const response = await axiosInstance.get<{
-			message: string;
-		}>("/ping");
-
-		setDate(response.data.message);
-	};
-
-	return (
-		<div>
-			<button
-				className="text-white px-2 py-2 bg-green-500 rounded-md"
-				onClick={handleFetch}
-			>
-				Fetch API
-			</button>
-			{date ? (
-				<p>Server time: {date}</p>
-			) : (
-				<p>Click the button to fetch the API</p>
-			)}
-		</div>
-	);
-};

src/app/components/Header.tsx

@@ -1,28 +1,54 @@
-import { getServerSession, Session } from "next-auth";
-import Link from "next/link";
+"use client";
+import {
+	Avatar,
+	Dropdown,
+	DropdownItem,
+	DropdownMenu,
+	DropdownTrigger,
+	Navbar,
+	NavbarBrand,
+	NavbarContent,
+} from "@nextui-org/react";
+import { useSession } from "next-auth/react";
 
-const Header = async () => {
-	const session = (await getServerSession()) as Session;
+export const Header = () => {
+	const { data: session } = useSession();
 
 	return (
-		<header className="bg-gray-900 text-white p-4">
-			<div className="container mx-auto flex justify-between items-center">
-				<h1 className="text-xl font-bold">Toogether</h1>
-				<div className="flex items-center gap-2">
-					<p>
-						Logged in as <strong>{session.user.name}</strong>
-					</p>
-					<nav className="space-x-4">
-						<Link href="/auth/logout">
-							<button className="bg-gray-800 px-4 py-2 rounded hover:scale-105 transition duration-200">
-								Logout
-							</button>
-						</Link>
-					</nav>
-				</div>
-			</div>
-		</header>
+		<Navbar>
+			<NavbarBrand>
+				<p className="font-bold text-inherit">Toogether</p>
+			</NavbarBrand>
+			<NavbarContent as="div" justify="end">
+				<Dropdown placement="bottom-end">
+					<DropdownTrigger>
+						<Avatar
+							isBordered
+							as="button"
+							className="transition-transform"
+							color="secondary"
+							name={session?.user?.name}
+							size="sm"
+						/>
+					</DropdownTrigger>
+					<DropdownMenu aria-label="Profile Actions" variant="flat">
+						<DropdownItem key="profile" className="h-14 gap-2">
+							<p>Signed in as</p>
+							<p className="font-semibold">
+								{session?.user?.name}
+							</p>
+						</DropdownItem>
+						<DropdownItem key="settings">Settings</DropdownItem>
+						<DropdownItem
+							key="logout"
+							color="danger"
+							href="/auth/logout"
+						>
+							Logout
+						</DropdownItem>
+					</DropdownMenu>
+				</Dropdown>
+			</NavbarContent>
+		</Navbar>
 	);
 };
-
-export default Header;

src/app/components/SessionProviderWrapper.tsx

@@ -1,11 +0,0 @@
-"use client";
-
-import { SessionProvider } from "next-auth/react";
-
-export default function SessionProviderWrapper({
-	children,
-}: {
-	children: React.ReactNode;
-}) {
-	return <SessionProvider>{children}</SessionProvider>;
-}

src/app/layout.tsx

@@ -1,4 +1,4 @@
-import SessionProviderWrapper from "./components/SessionProviderWrapper";
+import AppWrapper from "./components/AppWrapper";
 import "./globals.css";
 
 export default function RootLayout({
@@ -9,7 +9,7 @@ export default function RootLayout({
 	return (
 		<html lang="fr">
 			<body>
-				<SessionProviderWrapper>{children}</SessionProviderWrapper>
+				<AppWrapper>{children}</AppWrapper>
 			</body>
 		</html>
 	);

src/app/page.tsx

@@ -1,11 +1,9 @@
-import Header from "./components/Header";
-import { FetchApi } from "./components/FetchApi";
+import { Header } from "./components/Header";
 
 const HomePage = () => {
 	return (
 		<>
 			<Header />
-			<FetchApi />
 		</>
 	);
 };

tailwind.config.ts

@@ -1,10 +1,12 @@
 import type { Config } from "tailwindcss";
+import { nextui } from "@nextui-org/react";
 
 export default {
 	content: [
 		"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
 		"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
 		"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+		"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
 	],
 	theme: {
 		extend: {
@@ -24,5 +26,6 @@ export default {
 			},
 		},
 	},
-	plugins: [],
+	darkMode: "class",
+	plugins: [nextui()],
 } satisfies Config;