Game calendar working

src/ui/game/GameHeader.tsx

@@ -0,0 +1,61 @@
+import { ButtonProps } from "@/components/button/Button";
+import { Game } from "@/interface/Game";
+import { useState } from "react";
+import GameAdminButtons from "./GameAdminButtons";
+import DeleteGameModal from "./modals/DeleteGameModal";
+import GameModal from "./modals/GameModal";
+
+
+export default function GameHeader({
+	game
+}:{
+	game: Game;
+}){
+	const [ displayEditGameModal, setDisplayEditGameModal ] = useState(false);
+	const [ displayDeleteGameModal, setDisplayDeleteGameModal ] = useState(false);
+
+	const buttonProps: ButtonProps = {
+		variant: "ghost",
+		size: "md",
+		shape: "square"
+	};
+
+
+	return (
+		<h1
+			className="flex flex-col items-center justify-center"
+		>
+			<div
+				className="flex flex-row items-center justify-center text-4xl"
+			>
+				{
+					game.gameIcon &&
+					<img
+						className="m-auto mr-4"
+						src={`${import.meta.env.VITE_ICON_URL}/gameIcons/${game.gameIcon}`}
+						height={72}
+						width={72}
+					/>
+				}
+				{game.gameName}
+			</div>
+			<div>
+				<GameAdminButtons
+					buttonProps={buttonProps}
+					showEditGameModal={() => setDisplayEditGameModal(true)}
+					showDeleteGameModal={() => setDisplayDeleteGameModal(true)}
+				/>
+			</div>
+			<GameModal
+				display={displayEditGameModal}
+				close={() => setDisplayEditGameModal(false)}
+				game={game}
+			/>
+			<DeleteGameModal
+				display={displayDeleteGameModal}
+				close={() => setDisplayDeleteGameModal(false)}
+				game={game}
+			/>
+		</h1>
+	);
+}