hello new update

components/loggedInHeader.tsx

@@ -1,11 +1,16 @@
+"use client";
+
 import {
 	getLoggedInUser,
 	getUserByUserId,
 	UserProfileDetails,
 } from "@/lib/profile";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
+import LazyLoadedImage from "./lazyLoadedImage";
+import { loadThumbnails } from "@/lib/thumbnailLoader";
+import PremiumIcon from "./RobloxIcons";
 
-export function HomeLoggedInHeader() {
+export const HomeLoggedInHeader = React.memo(function HomeLoggedInHeader() {
 	const [profileDetails, setProfileDetails] =
 		useState<UserProfileDetails | null>(null);
 
@@ -17,15 +22,34 @@ export function HomeLoggedInHeader() {
 	}, []);
 
 	if (!profileDetails) {
-		return (<></>)
+		return <></>;
 	}
 
+	loadThumbnails([
+		{
+			type: "AvatarHeadShot",
+			targetId: profileDetails.id,
+			format: "webp",
+			size: "720x720",
+		},
+	]).catch(a => {});
+
 	return (
-		<div>
-			<span className="text-xl">Hello, {profileDetails.displayName}</span>
-			<span className="text-muted-foreground text-sm text-blue">{"@"}{profileDetails.name}</span>
-			<br/>
-			{profileDetails.id}
+		<div className="flex items-center gap-6 bg-base rounded-xl px-8 py-6 w-fit mt-8 ml-0">
+			<LazyLoadedImage
+				imgId={`AvatarHeadShot_${profileDetails.id}`}
+				alt=""
+				className="w-28 h-28 rounded-full border-4 border-base bg-base shadow-lg"
+			/>
+			<div className="flex flex-col justify-center">
+				<span className="text-3xl font-bold text-text flex items-center gap-2">
+					Hello, {profileDetails.displayName}
+					<PremiumIcon className="w-6 h-6 fill-transparent"/>
+				</span>
+				<span className="text-base text-subtext0 mt-1">
+					@{profileDetails.name}
+				</span>
+			</div>
 		</div>
 	);
-}
+});