function MainComponent() { const [friendUsername, setFriendUsername] = React.useState(""); const [team1Score, setTeam1Score] = React.useState(0); const [team2Score, setTeam2Score] = React.useState(0); const [winner, setWinner] = React.useState(""); const handleFriendSubmit = (e)=>{ e.preventDefault(); setFriendUsername(""); }; const handleScoreSubmit = (e)=>{ e.preventDefault(); if (team1Score >= 11 && team1Score - team2Score >= 2) { setWinner("Team 1"); } else if (team2Score >= 11 && team2Score - team1Score >= 2) { setWinner("Team 2"); } else { setWinner("No winner yet"); } }; const [currentPage, setCurrentPage] = React.useState("friends"); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#577590] text-white p-4 mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "Pickleball App"), /*#__PURE__*/ React.createElement("nav", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage("friends"), className: "underline", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Friends"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage("games"), className: "underline", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Games"))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, currentPage === "friends" && /*#__PURE__*/ React.createElement("section", { className: "bg-white p-4 mb-4 shadow-md", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto mb-2", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "Friend Players"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleFriendSubmit, __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "friendUsername", value: friendUsername, onChange: (e)=>setFriendUsername(e.target.value), type: "text", placeholder: "Enter username", className: "border p-2 mb-2 w-full", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#577590] text-white p-2 w-full", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "Add Friend"))), currentPage === "games" && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("section", { className: "bg-white p-4 mb-4 shadow-md", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto mb-2", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, "Score Game"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleScoreSubmit, __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1 font-roboto", __source: { fileName: "", lineNumber: 64, columnNumber: 19 }, __self: this }, "Team 1 Score"), /*#__PURE__*/ React.createElement("input", { name: "team1Score", value: team1Score, onChange: (e)=>setTeam1Score(Number(e.target.value)), type: "number", className: "border p-2 w-full", __source: { fileName: "", lineNumber: 65, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1 font-roboto", __source: { fileName: "", lineNumber: 74, columnNumber: 19 }, __self: this }, "Team 2 Score"), /*#__PURE__*/ React.createElement("input", { name: "team2Score", value: team2Score, onChange: (e)=>setTeam2Score(Number(e.target.value)), type: "number", className: "border p-2 w-full", __source: { fileName: "", lineNumber: 75, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#577590] text-white p-2 w-full", __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, "Submit Scores"))), /*#__PURE__*/ React.createElement("section", { className: "bg-white p-4 shadow-md", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto mb-2", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, "Decide Winner"), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1 font-roboto", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }, "Winner"), /*#__PURE__*/ React.createElement("input", { name: "winner", value: winner, type: "text", className: "border p-2 w-full", readOnly: true, __source: { fileName: "", lineNumber: 96, columnNumber: 17 }, __self: this })))))); }