function TableTennisScoreKeeper({ title, player1Points, player2Points, handlePlayer1Score, handlePlayer1RemovePoint, handlePlayer2Score, handlePlayer2RemovePoint }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-green-200", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto mb-6", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center bg-white p-6 rounded-lg shadow-lg w-[300px]", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, "Player 1:"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handlePlayer1Score, className: "text-2xl py-2 px-4 bg-blue-500 text-white font-roboto font-bold rounded-full mb-4 mr-2", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, "Add Point"), /*#__PURE__*/ React.createElement("button", { onClick: handlePlayer1RemovePoint, className: "text-2xl py-2 px-4 bg-red-500 text-white font-roboto font-bold rounded-full mb-4", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, "Remove Point")), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-roboto mb-2", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "Points: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 21, columnNumber: 57 }, __self: this }, player1Points)), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-bold font-roboto mt-4 mb-4", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "Player 2:"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handlePlayer2Score, className: "text-2xl py-2 px-4 bg-blue-500 text-white font-roboto font-bold rounded-full mb-4 mr-2", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Add Point"), /*#__PURE__*/ React.createElement("button", { onClick: handlePlayer2RemovePoint, className: "text-2xl py-2 px-4 bg-red-500 text-white font-roboto font-bold rounded-full mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Remove Point")), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-roboto mb-2", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "Points: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 38, columnNumber: 57 }, __self: this }, player2Points)))); } function TableTennisScoreKeeperStory() { const [player1Points, setPlayer1Points] = React.useState(0); const [player2Points, setPlayer2Points] = React.useState(0); const handlePlayer1Score = ()=>setPlayer1Points(player1Points + 1); const handlePlayer1RemovePoint = ()=>setPlayer1Points(player1Points > 0 ? player1Points - 1 : 0); const handlePlayer2Score = ()=>setPlayer2Points(player2Points + 1); const handlePlayer2RemovePoint = ()=>setPlayer2Points(player2Points > 0 ? player2Points - 1 : 0); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TableTennisScoreKeeper, { title: "Table Tennis Score Keeper", player1Points: player1Points, player2Points: player2Points, handlePlayer1Score: handlePlayer1Score, handlePlayer1RemovePoint: handlePlayer1RemovePoint, handlePlayer2Score: handlePlayer2Score, handlePlayer2RemovePoint: handlePlayer2RemovePoint, __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this })); } function MainComponent() { const [player1Points, setPlayer1Points] = React.useState(0); const [player2Points, setPlayer2Points] = React.useState(0); const handlePlayer1Score = ()=>setPlayer1Points(player1Points + 1); const handlePlayer1RemovePoint = ()=>setPlayer1Points(player1Points > 0 ? player1Points - 1 : 0); const handlePlayer2Score = ()=>setPlayer2Points(player2Points + 1); const handlePlayer2RemovePoint = ()=>setPlayer2Points(player2Points > 0 ? player2Points - 1 : 0); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-blue-200", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto mb-6", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, "Table Tennis Game App"), /*#__PURE__*/ React.createElement(TableTennisScoreKeeper, { title: "Table Tennis Score Keeper", player1Points: player1Points, player2Points: player2Points, handlePlayer1Score: handlePlayer1Score, handlePlayer1RemovePoint: handlePlayer1RemovePoint, handlePlayer2Score: handlePlayer2Score, handlePlayer2RemovePoint: handlePlayer2RemovePoint, __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this })); }