feat: enhance Header component with user profile fetching and admin button, update ThemeSwitcher to use Button component

src/app/components/Header/index.tsx

@@ -1,6 +1,6 @@
-"use client";
 import {
 	Avatar,
+	Button,
 	Dropdown,
 	DropdownItem,
 	DropdownMenu,
@@ -8,9 +8,13 @@ import {
 	Navbar,
 	NavbarBrand,
 	NavbarContent,
+	NavbarItem,
 } from "@nextui-org/react";
 import { useSession } from "next-auth/react";
 import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher";
+import { axiosInstance } from "@/app/lib/axios";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 
 const getInitials = (name: string) => {
 	if (!name) return "";
@@ -28,14 +32,36 @@ const getInitials = (name: string) => {
 
 export const Header = () => {
 	const { data: session } = useSession();
+	const router = useRouter();
+
+	const [userProfile, setUserProfile] = useState<{
+		id: string;
+		username: string;
+		role: "ADMIN" | "STUDENT";
+	}>();
 
 	const initials = session?.user?.name ? getInitials(session.user.name) : "";
 
+	const fetchUserProfile = async () => {
+		return await axiosInstance<{
+			id: string;
+			username: string;
+			role: "ADMIN" | "STUDENT";
+		}>("/@me");
+	}
+
+	useEffect(() => {
+		fetchUserProfile().then(r => {
+			setUserProfile(r.data);
+		});
+	}, []);
+
 	return (
 		<Navbar className="mb-2">
 			<NavbarBrand>
 				<p className="font-bold text-inherit">Toogether</p>
 			</NavbarBrand>
+
 			<NavbarContent as="div" justify="end">
 				<Dropdown placement="bottom-end">
 					<DropdownTrigger>
@@ -65,7 +91,20 @@ export const Header = () => {
 						</DropdownItem>
 					</DropdownMenu>
 				</Dropdown>
-				<ThemeSwitcher />
+				<NavbarItem>
+					<ThemeSwitcher />
+				</NavbarItem>
+				{
+					userProfile?.role === "ADMIN" ? (
+						<NavbarItem>
+							<Button
+								onPress={() => router.push("/admin")}
+							>
+								🔧
+							</Button>
+						</NavbarItem>
+					) : null
+				}
 			</NavbarContent>
 		</Navbar>
 	);

src/app/components/ThemeSwitcher/ThemeSwitcher.tsx

@@ -1,24 +1,13 @@
 "use client";
+import { Button } from "@nextui-org/react";
 import { useTheme } from "next-themes";
-import { useEffect, useState } from "react";
 
 export const ThemeSwitcher = () => {
-	const [mounted, setMounted] = useState(false);
 	const { theme, setTheme } = useTheme();
 
-	useEffect(() => {
-		setMounted(true);
-	}, []);
-
-	if (!mounted) return null;
-
 	return (
-		<button
+		<Button onPress={() => setTheme(theme === "light" ? "dark" : "light")}>
-			className={`backdrop-blur-sm rounded-lg ${theme === "light" ? "bg-black/10" : "bg-white/10"
+			{theme === "light" ? "🌑" : "☀️"}
-				} p-2`}
+		</Button>
-			onClick={() => setTheme(theme === "light" ? "dark" : "light")}
-		>
-			{theme === "light" ? "🌙" : "☀️"}
-		</button>
 	);
 };