skidding

app/games/[id]/content.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useEffect } from "react";
+import Link from "next/link";
+import { usePlaceDetails } from "@/hooks/roblox/usePlaceDetails";
+import { RobloxVerifiedSmall } from "@/components/roblox/RobloxTooltips";
+import { Button } from "@/components/ui/button";
+
+interface GamePageContentProps {
+	placeId: string;
+}
+
+export default function GamePageContent({ placeId }: GamePageContentProps) {
+	const game = usePlaceDetails(placeId);
+
+	// Set dynamic document title
+	useEffect(() => {
+		if (!!game) {
+			document.title = `${game.name} | ocbwoy3-chan's roblox`;
+		}
+	}, [game]);
+
+	if (!game) return <div className="p-4">Loading game...</div>;
+
+	return (
+		<div className="p-4 space-y-6">
+			<Button onClick={a=>open(`roblox://placeId=${game.rootPlaceId}`)}>
+				PLAY
+			</Button>
+			<div className="break-all pl-4 whitespace-pre-line font-black text-2xl">
+				{game.name}
+			</div>
+			<div className="break-all pl-4 whitespace-pre-line font-bold flex">
+				<Link
+					href={`https://roblox.com/${
+						game.creator.type === "Group" ? "groups" : "user"
+					}/${game.creator.id}`}
+					className="flex"
+				>
+					<span className="underline">
+						{game.creator.name}
+					</span>
+						{game.creator.hasVerifiedBadge && (
+							<RobloxVerifiedSmall className="text-base fill-blue w-4 h-4" />
+						)}
+				</Link>
+			</div>
+
+			<div className="break-all pl-4 whitespace-pre-line">
+				{game.description}
+			</div>
+		</div>
+	);
+}

app/games/[id]/page.tsx

@@ -0,0 +1,11 @@
+import { Suspense } from "react";
+import GamePageContentF from "./content";
+
+// page.tsx (Server Component)
+export default async function GamePageContent({ params }: { params: { id: string } }) {
+	return (
+		<Suspense fallback={<div className="p-4">Loading profile…</div>}>
+			<GamePageContentF placeId={(await params).id} />
+		</Suspense>
+	);
+}

app/globals.css

@@ -3,7 +3,11 @@
 @tailwind utilities;
 
 body {
-	font-family: Geist;
+	font-family: SF Pro Display, Geist;
+}
+
+.font-super-mono {
+	font-family: SF Mono, Geist Mono;
 }
 
 @layer base {

app/layout.tsx

@@ -42,8 +42,8 @@ export default function RootLayout({
 								className="w-screen h-screen bg-blend-hard-light fixed top-0 left-0 opacity-25"
 								alt=""
 							/> */}
+							<QuickTopUI />
 							<div className="backdrop-blur-lg z-10 isolate overflow-scroll no-scrollbar w-screen max-h-screen h-screen antialiased overflow-x-hidden">
-								<QuickTopUI />
 								<QuickTopUILogoPart />
 								{children}
 							</div>

app/users/[id]/content.tsx

@@ -4,13 +4,32 @@ import { useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { notFound } from "next/navigation";
 import { Separator } from "@/components/ui/separator";
-import { getUserByUserId } from "@/lib/profile";
+import { getUserByUserId, UserProfileDetails } from "@/lib/profile";
 import { UserProfileHeader } from "@/components/roblox/UserProfileHeader";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { ShieldBanIcon } from "lucide-react";
+import Link from "next/link";
+import { useFriendsHome } from "@/hooks/roblox/useFriends";
+import { FriendCarousel } from "@/components/roblox/FriendCarousel";
 
 interface UserProfileContentProps {
 	userId: string;
 }
 
+function ProfileMoreDetails({ profile }: { profile: UserProfileDetails }) {
+	const theirFriends = useFriendsHome(profile.id.toString());
+
+	return (
+		<>
+			{!theirFriends && <Skeleton className="w-full h-64" />}
+			{/*
+			//@ts-expect-error */}
+			<FriendCarousel title={<span className="pl-4">Friends</span>} className="overflow-visible -ml-4" friends={theirFriends || []} />
+		</>
+	);
+}
+
 export default function UserProfileContent({
 	userId
 }: UserProfileContentProps) {
@@ -34,9 +53,34 @@ export default function UserProfileContent({
 		<div className="p-4 space-y-6">
 			<UserProfileHeader user={profile} />
 			<Separator />
-			<div className="break-all whitespace-normal">
+			<div className="break-all pl-4 whitespace-pre-line">
 				{profile.description}
 			</div>
+			{profile.isBanned && (
+				<>
+					<div className="justify-center w-full pt-6">
+						<Alert
+							variant="default"
+							className="bg-base/50 space-x-2"
+						>
+							<ShieldBanIcon />
+							<AlertTitle>This user is banned</AlertTitle>
+							<AlertDescription>
+								Their Roblox account appears to be terminated
+								from the platform. You can see their inventory
+								and RAP history on{" "}
+								<Link
+									className="text-blue decoration-blue underline"
+									href={`https://www.rolimons.com/player/${profile.id}`}
+								>
+									Rolimons
+								</Link>
+							</AlertDescription>
+						</Alert>
+					</div>
+				</>
+			)}
+			{!profile.isBanned && <ProfileMoreDetails profile={profile} />}
 		</div>
 	);
 }