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>
+	);
+}