57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
"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";
|
|
import { useGameLaunch } from "@/components/providers/GameLaunchProvider";
|
|
|
|
interface GamePageContentProps {
|
|
placeId: string;
|
|
}
|
|
|
|
export default function GamePageContent({ placeId }: GamePageContentProps) {
|
|
const game = usePlaceDetails(placeId);
|
|
const { launchGame } = useGameLaunch();
|
|
|
|
// Set dynamic document title
|
|
useEffect(() => {
|
|
if (!!game) {
|
|
document.title = `${game.name} | Roblox`;
|
|
}
|
|
}, [game]);
|
|
|
|
if (!game) return <div className="p-4">Loading game...</div>;
|
|
|
|
return (
|
|
<div className="p-4 space-y-6">
|
|
<Button onClick={() => launchGame(game.rootPlaceId.toString())}>
|
|
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>
|
|
);
|
|
}
|