Game calendar working

src/pages/protected/GamePage.tsx

@@ -1,10 +1,66 @@
+import TabGroup, { Tab } from "@/components/tab/TabGroup";
+import { useGetGame } from "@/hooks/GameHooks";
+import { Game } from "@/interface/Game";
+import GameCalendarDisplay from "@/ui/calendar/GameCalendarDisplay";
+import GameHeader from "@/ui/game/GameHeader";
+import RaidGroupsByGameDisplay from "@/ui/raidGroup/RaidGroupsByGameDisplay";
+import { useEffect, useState } from "react";
+import { Navigate, useParams } from "react-router";
+
+
 export default function GamePage(){
-	//TODO:
+	const { gameId } = useParams();
+	const tabs: Tab[] = [
+		{
+			tabHeader: "Calendar",
+			tabContent: <GameCalendarDisplay gameId={gameId!}/>
+		},
+		{
+			tabHeader: "Raid Groups",
+			tabContent: <RaidGroupsByGameDisplay gameId={gameId!}/>
+		},
+		{
+			tabHeader: "Classes",
+			tabContent: <div>Classes</div>
+		}
+	];
+
+	const [ game, setGame ] = useState<Game>();
+	const gameQuery = useGetGame(gameId ?? "", false);
+	useEffect(() => {
+		if(gameQuery.status === "success"){
+			setGame(gameQuery.data);
+		}
+	}, [ gameQuery ]);
 
 
-	return (
-		<div>
-			Game Page
-		</div>
-	);
+	if(gameQuery.status === "pending"){
+		return (
+			<div>Loading...</div>
+		);
+	}
+	else if(gameQuery.status === "error"){
+		return (
+			<div>Error</div>
+		);
+	}
+	else if(gameQuery.status === "success" && (gameQuery.data === undefined || gameQuery.data === undefined)){
+		return (
+			<Navigate to="/game"/>
+		);
+	}
+	else if(game){
+		return (
+			<main
+				className="flex flex-col items-center justify-center"
+			>
+				<GameHeader
+					game={game}
+				/>
+				<TabGroup
+					tabs={tabs}
+				/>
+			</main>
+		);
+	}
 }