switched theme

components/gameCard.tsx

@@ -1,4 +1,4 @@
-import { useGameThumbnailLazyLoad } from "@/hooks/use-lazy-load";
+import { useThumbnailLazyLoad } from "@/hooks/use-lazy-load";
 import { ContentMetadata } from "@/lib/omniRecommendation";
 import LazyLoadedImage from "./lazyLoadedImage";
 import { ContextMenu, ContextMenuContent, ContextMenuSeparator, ContextMenuTrigger } from "./ui/context-menu";
@@ -16,7 +16,7 @@ export function GameCard({ game }: GameCardProps) {
 					<div className="overflow-hidden">
 						{game.primaryMediaAsset ? (
 							<LazyLoadedImage
-								imgId={game.rootPlaceId.toString()}
+								imgId={'GameThumbnail_'+game.rootPlaceId.toString()}
 								alt={game.name}
 								className="object-cover w-full h-full"
 							/>

components/lazyLoadedImage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useGameThumbnailLazyLoad } from '@/hooks/use-lazy-load';
+import { useThumbnailLazyLoad } from '@/hooks/use-lazy-load';
 
 interface LazyLoadedImageProps {
 	imgId: string;
@@ -8,7 +8,7 @@ interface LazyLoadedImageProps {
 }
 
 const LazyLoadedImage: React.FC<LazyLoadedImageProps> = ({ imgId, alt, ...props }: LazyLoadedImageProps) => {
-	const imgUrl = useGameThumbnailLazyLoad(imgId);
+	const imgUrl = useThumbnailLazyLoad(imgId);
 
 	return (
 		<div>

components/loggedInHeader.tsx

@@ -0,0 +1,31 @@
+import {
+	getLoggedInUser,
+	getUserByUserId,
+	UserProfileDetails,
+} from "@/lib/profile";
+import { useEffect, useState } from "react";
+
+export function HomeLoggedInHeader() {
+	const [profileDetails, setProfileDetails] =
+		useState<UserProfileDetails | null>(null);
+
+	useEffect(() => {
+		(async () => {
+			const authed = await getLoggedInUser();
+			setProfileDetails(await getUserByUserId(authed.id.toString()));
+		})();
+	}, []);
+
+	if (!profileDetails) {
+		return (<></>)
+	}
+
+	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>
+	);
+}