function MainComponent() { const [games, setGames] = React.useState([]); const handleGameSubmit = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const gameData = { homeTeam: formData.get('homeTeam'), awayTeam: formData.get('awayTeam'), homeScore: formData.get('homeScore'), awayScore: formData.get('awayScore'), date: formData.get('date') }; setGames([ ...games, gameData ]); event.target.reset(); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f7f7f7] font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center text-[#121212] mb-6", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "Soccer Game Stats Tracker"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleGameSubmit, className: "mb-8", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4 justify-center", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "homeTeam", placeholder: "Home Team", className: "p-2 border border-gray-300 rounded w-full md:w-auto", required: true, __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "awayTeam", placeholder: "Away Team", className: "p-2 border border-gray-300 rounded w-full md:w-auto", required: true, __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "homeScore", placeholder: "Home Score", className: "p-2 border border-gray-300 rounded w-full md:w-auto", required: true, __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "awayScore", placeholder: "Away Score", className: "p-2 border border-gray-300 rounded w-full md:w-auto", required: true, __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "date", name: "date", className: "p-2 border border-gray-300 rounded w-full md:w-auto", required: true, __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "py-2 px-4 bg-[#009688] text-white rounded hover:bg-[#00796b] transition-colors w-full md:w-auto", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "Add Game"))), /*#__PURE__*/ React.createElement("div", { className: "overflow-auto rounded shadow", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-[#e0e0e0]", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }, "Date"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, "Home Team"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, "Away Team"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, "Home Score"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, "Away Score"))), /*#__PURE__*/ React.createElement("tbody", { className: "bg-white", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, games.map((game, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: `${index % 2 === 0 ? 'bg-[#f7f7f7]' : 'bg-white'}`, __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 82, columnNumber: 19 }, __self: this }, game.date), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 83, columnNumber: 19 }, __self: this }, game.homeTeam), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 84, columnNumber: 19 }, __self: this }, game.awayTeam), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 85, columnNumber: 19 }, __self: this }, game.homeScore), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 86, columnNumber: 19 }, __self: this }, game.awayScore)))))))); }