function MainComponent() { const [events, setEvents] = React.useState([]); const [formState, setFormState] = React.useState({ eventName: '', description: '', location: '', date: '' }); const handleChange = (e)=>{ const { name, value } = e.target; setFormState((prev)=>({ ...prev, [name]: value })); }; const handleSubmit = (e)=>{ e.preventDefault(); setEvents((prev)=>[ ...prev, formState ]); setFormState({ eventName: '', description: '', location: '', date: '' }); // Reset form }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto flex flex-col items-center p-5", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-8", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, "Sign Up for Master Classes"), /*#__PURE__*/ React.createElement("div", { className: "mt-10 w-full max-w-[800px]", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex flex-col items-center gap-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Event Name", className: "p-2 w-full border border-gray-300 rounded-md", name: "eventName", value: formState.eventName, onChange: handleChange, __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { placeholder: "Description", className: "p-2 w-full h-[200px] border border-gray-300 rounded-md", name: "description", value: formState.description, onChange: handleChange, __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-row gap-4 w-full", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Location", className: "p-2 w-1/2 border border-gray-300 rounded-md", name: "location", value: formState.location, onChange: handleChange, __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "date", className: "p-2 w-1/2 border border-gray-300 rounded-md", name: "date", value: formState.date, onChange: handleChange, __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 bg-blue-600 text-white p-3 rounded-lg w-full hover:bg-blue-700 transition duration-150 ease-in-out", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Create Event"))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px] mt-10", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "Upcoming Events"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, events.map((event, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-3", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, event.eventName), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, event.description), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, event.location, " - ", event.date)))))); }