function MainComponent() { const [players, setPlayers] = React.useState([]); const handleSubmit = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const newPlayer = { playerName: formData.get('playerName'), skillLevel: formData.get('skillLevel'), availability: formData.get('availability'), createdAt: new Date().toISOString() }; setPlayers([ ...players, newPlayer ]); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f3f4f6] flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#27ae60] mb-8 flex items-center", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "emoji-pickleball.png", alt: "Pickleball emoji with sunglasses", className: "w-12 h-12 mr-3", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }), "Pickleball Partners"), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-8 mb-6 w-full max-w-lg", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "space-y-6", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "player-name", className: "font-roboto text-[#34495e] mb-2", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "Player Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "player-name", name: "playerName", placeholder: "John Doe", className: "border-[#ced4da] border-2 p-3 rounded-lg focus:outline-none focus:border-[#27ae60]", required: true, __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "skill-level", className: "font-roboto text-[#34495e] mb-2", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "Skill Level"), /*#__PURE__*/ React.createElement("select", { id: "skill-level", name: "skillLevel", className: "border-[#ced4da] border-2 p-3 rounded-lg focus:outline-none focus:border-[#27ae60]", required: true, __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, "Select Skill Level"), /*#__PURE__*/ React.createElement("option", { value: "beginner", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, "Beginner"), /*#__PURE__*/ React.createElement("option", { value: "intermediate", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, "Intermediate"), /*#__PURE__*/ React.createElement("option", { value: "advanced", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, "Advanced"), /*#__PURE__*/ React.createElement("option", { value: "pro", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, "Pro"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "availability", className: "font-roboto text-[#34495e] mb-2", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "Availability"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "availability", name: "availability", placeholder: "Weekdays after 6pm", className: "border-[#ced4da] border-2 p-3 rounded-lg focus:outline-none focus:border-[#27ae60]", required: true, __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-[200px] bg-[#27ae60] text-white p-3 rounded-lg font-semibold font-roboto hover:bg-[#2ecc71] focus:outline-none", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "Add Player")))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, players.sort((a, b)=>new Date(b.createdAt) - new Date(a.createdAt)).map((player, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white shadow-md rounded-lg p-6 mb-4 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-roboto text-[#27ae60] mb-2", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, player.playerName), /*#__PURE__*/ React.createElement("div", { className: "text-md font-roboto text-[#34495e]", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Skill Level: ", player.skillLevel), /*#__PURE__*/ React.createElement("div", { className: "text-md font-roboto text-[#34495e]", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Availability: ", player.availability))))); }