fix: use next/image for profile picture

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;

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>