From 961ec9bfcd0db9bd56108195e7a3207901969b1d Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Sun, 30 Mar 2025 18:04:48 +0100
Subject: [PATCH] fix: use next/image for profile picture

---
 next.config.ts                          | 11 ++++++++++-
 src/app/components/profile-overview.tsx |  9 ++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/next.config.ts b/next.config.ts
index e9ffa30..791beae 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,7 +1,16 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+	images: {
+		remotePatterns: [
+			{
+				hostname: "avatars.githubusercontent.com",
+			},
+			{
+				hostname: "cdn.discordapp.com",
+			},
+		],
+	},
 };
 
 export default nextConfig;
diff --git a/src/app/components/profile-overview.tsx b/src/app/components/profile-overview.tsx
index b881d4c..97b42a2 100644
--- a/src/app/components/profile-overview.tsx
+++ b/src/app/components/profile-overview.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
 import { auth } from "@/lib/auth";
 
 export default async function ProfileOverview() {
@@ -6,7 +7,13 @@ export default async function ProfileOverview() {
 	return (
 		<li title="Your profile">
 			<button className="pill 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" />
+				<Image
+					src={session?.user?.image ?? "/missing.webp"}
+					alt="profile picture"
+					width={40}
+					height={40}
+					className="rounded-full aspect-square object-cover h-full outline-2 outline-orange-400"
+				/>
 				<span className="pr-4 overflow-hidden whitespace-nowrap text-ellipsis w-full">{session?.user?.username ?? "unknown"}</span>
 			</button>
 		</li>