From dbe1d2417c6441ae37d2cbed31b8f24494f200f4 Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Fri, 28 Mar 2025 22:58:43 +0000
Subject: [PATCH] feat: profile overview and logout button

---
 public/missing.webp                     | Bin 0 -> 122 bytes
 src/app/components/header.tsx           |  36 ++++++++++++++++--------
 src/app/components/logout-button.tsx    |  14 +++++++++
 src/app/components/profile-overview.tsx |  14 +++++++++
 4 files changed, 52 insertions(+), 12 deletions(-)
 create mode 100644 public/missing.webp
 create mode 100644 src/app/components/logout-button.tsx
 create mode 100644 src/app/components/profile-overview.tsx

diff --git a/public/missing.webp b/public/missing.webp
new file mode 100644
index 0000000000000000000000000000000000000000..1d623b67b5fa8575045f696abe2c7fdabc09f391
GIT binary patch
literal 122
zcmV-=0EPcjNk&F;00012MM6+kP&iCw0000l|HJ<P4-oS|-18qCh=w8j|Fo!Ti|9Yv
zwr#^akhBkI?wriw|6cq@eEj#<Kk*;`krw~`^-uiAfBeV)?g0MdKmOx?cL4wKAOG>c
cJAnWAkN^1J9l(G5$AA3q4&XojQ!f510DYQ7X#fBK

literal 0
HcmV?d00001

diff --git a/src/app/components/header.tsx b/src/app/components/header.tsx
index 41f351e..0d95c5a 100644
--- a/src/app/components/header.tsx
+++ b/src/app/components/header.tsx
@@ -1,9 +1,14 @@
 import Link from "next/link";
-import SearchBar from "./search-bar";
-
+import { getServerSession } from "next-auth";
 import { Icon } from "@iconify/react";
 
-export default function Header() {
+import SearchBar from "./search-bar";
+import ProfileOverview from "./profile-overview";
+import LogoutButton from "./logout-button";
+
+export default async function Header() {
+	const session = await getServerSession();
+
 	return (
 		<div className="fixed top-0 w-full p-4 flex justify-between items-center bg-amber-50 border-b-4 border-amber-200 shadow-md">
 			<Link href={"/"} className="font-black text-3xl tracking-wide text-orange-400">
@@ -12,22 +17,29 @@ export default function Header() {
 
 			<SearchBar />
 
-			<ul className="flex gap-3 items-center">
-				<li>
-					<Link href={"/random"} className="button !p-1.5">
+			<ul className="flex gap-3 items-center h-11 *:h-full">
+				<li title="Random Mii">
+					<Link href={"/random"} className="button !p-0 h-full aspect-square">
 						<Icon icon="mdi:dice-3" fontSize={28} />
 					</Link>
 				</li>
 				<li>
-					<Link href={"/submit"} className="button">
+					<Link href={"/submit"} className="button h-full">
 						Submit
 					</Link>
 				</li>
-				<li>
-					<Link href={"/login"} className="button">
-						Login
-					</Link>
-				</li>
+				{!session?.user ? (
+					<li>
+						<Link href={"/login"} className="button h-full">
+							Login
+						</Link>
+					</li>
+				) : (
+					<>
+						<ProfileOverview />
+						<LogoutButton />
+					</>
+				)}
 			</ul>
 		</div>
 	);
diff --git a/src/app/components/logout-button.tsx b/src/app/components/logout-button.tsx
new file mode 100644
index 0000000..b5d26b2
--- /dev/null
+++ b/src/app/components/logout-button.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import { Icon } from "@iconify/react";
+import { signOut } from "next-auth/react";
+
+export default function LogoutButton() {
+	return (
+		<li title="Logout">
+			<button onClick={() => signOut()} className="button !p-0 aspect-square h-full">
+				<Icon icon="ic:round-logout" fontSize={24} />
+			</button>
+		</li>
+	);
+}
diff --git a/src/app/components/profile-overview.tsx b/src/app/components/profile-overview.tsx
new file mode 100644
index 0000000..df44245
--- /dev/null
+++ b/src/app/components/profile-overview.tsx
@@ -0,0 +1,14 @@
+import { getServerSession } from "next-auth";
+
+export default async function ProfileOverview() {
+	const session = await getServerSession();
+
+	return (
+		<li title="Your profile">
+			<button className="button !gap-2 !p-0 h-full max-w-64">
+				<img src={session?.user?.image ?? "/missing.webp"} alt="profile picture" className="rounded-full h-full outline-2 outline-orange-400" />
+				<span className="pr-4 overflow-hidden whitespace-nowrap text-ellipsis w-full">{session?.user?.name}</span>
+			</button>
+		</li>
+	);
+}