From e6d8a9ae9edd96b8766fc4f92a7dfb6928be40be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi?= <PSNazert@gmail.com>
Date: Thu, 2 Jan 2025 18:54:59 +0100
Subject: [PATCH] feat: enhance Header component to display user initials and
 refactor ThemeSwitcher for improved button handling

---
 src/app/components/Header/index.tsx            | 18 +++++++++++++++++-
 .../components/ThemeSwitcher/ThemeSwitcher.tsx | 13 +++++++------
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/app/components/Header/index.tsx b/src/app/components/Header/index.tsx
index 4891d0d..ae5b35d 100644
--- a/src/app/components/Header/index.tsx
+++ b/src/app/components/Header/index.tsx
@@ -12,9 +12,25 @@ import {
 import { useSession } from "next-auth/react";
 import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher";
 
+const getInitials = (name: string) => {
+	if (!name) return "";
+
+	const nameParts = name.split(" ");
+	if (nameParts.length === 1) {
+		return name;
+	}
+
+	const firstInitial = nameParts[0]?.[0] || "";
+	const secondInitial = nameParts[1]?.[0] || nameParts[0]?.[1] || "";
+
+	return firstInitial + secondInitial;
+};
+
 export const Header = () => {
 	const { data: session } = useSession();
 
+	const initials = session?.user?.name ? getInitials(session.user.name) : "";
+
 	return (
 		<Navbar className="mb-2">
 			<NavbarBrand>
@@ -29,7 +45,7 @@ export const Header = () => {
 							as="button"
 							className="transition-transform"
 							color="secondary"
-							name={session?.user?.name}
+							name={initials}
 							size="sm"
 						/>
 					</DropdownTrigger>
diff --git a/src/app/components/ThemeSwitcher/ThemeSwitcher.tsx b/src/app/components/ThemeSwitcher/ThemeSwitcher.tsx
index 21ea773..64bf4b8 100644
--- a/src/app/components/ThemeSwitcher/ThemeSwitcher.tsx
+++ b/src/app/components/ThemeSwitcher/ThemeSwitcher.tsx
@@ -13,11 +13,12 @@ export const ThemeSwitcher = () => {
 	if (!mounted) return null;
 
 	return (
-		<div className={`fixed bottom-4 right-4 rounded-lg ${theme === "light" ? "bg-black" : "bg-white"} p-2`}>
-			{theme === "light" ? (
-				<button onClick={() => setTheme("dark")}>🌙</button>) : (
-				<button onClick={() => setTheme("light")}>☀️</button>
-			)}
-		</div>
+		<button
+			className={`fixed bottom-4 right-4 rounded-lg ${theme === "light" ? "bg-black" : "bg-white"
+				} p-2`}
+			onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+		>
+			{theme === "light" ? "🌙" : "☀️"}
+		</button>
 	);
 };