function MainComponent() { const [activeGame, setActiveGame] = React.useState('tetris'); const handleGameSelection = (game)=>{ setActiveGame(game); }; let activeGameContent; switch(activeGame){ case 'frogger': activeGameContent = /*#__PURE__*/ React.createElement("iframe", { src: "path-to-frogger-game", className: "w-full h-full", title: "Frogger Game", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }); break; case 'tetris': activeGameContent = /*#__PURE__*/ React.createElement("iframe", { src: "path-to-tetris-game", className: "w-full h-full", title: "Tetris Game", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }); break; case 'side-scroller': activeGameContent = /*#__PURE__*/ React.createElement("iframe", { src: "path-to-side-scroller-game", className: "w-full h-full", title: "Side Scroller Game", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }); break; default: activeGameContent = /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 36, columnNumber: 27 }, __self: this }, "Select a game to play!"); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-grow p-4 overflow-auto", style: { height: '66.666%' }, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, activeGameContent), /*#__PURE__*/ React.createElement("div", { className: "bg-[#010101] text-white p-4 flex items-center justify-around", style: { height: '33.333%' }, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { onClick: ()=>handleGameSelection('frogger'), className: "hover:cursor-pointer", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "frogger-thumbnail.jpg", alt: "Thumbnail of new Frogger game", className: "h-[100px] w-[100px]", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { onClick: ()=>handleGameSelection('tetris'), className: "hover:cursor-pointer", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "tetris-thumbnail.jpg", alt: "Thumbnail of new Tetris game", className: "h-[100px] w-[100px]", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { onClick: ()=>handleGameSelection('side-scroller'), className: "hover:cursor-pointer", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "side-scroller-thumbnail.jpg", alt: "Thumbnail of new Side Scroller game", className: "h-[100px] w-[100px]", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this })))); }