function MainComponent() { const genres = [ "Music", "Arts", "Sports", "Education" ]; const places = [ "Theatre", "Concert Hall", "Art Gallery", "Stadium" ]; const locations = [ "Downtown", "Uptown", "Near Beach", "Suburb" ]; const [events, setEvents] = React.useState([]); const [filterGenre, setFilterGenre] = React.useState(""); const [filterPlace, setFilterPlace] = React.useState(""); const [filterLocation, setFilterLocation] = React.useState(""); const handleSubmit = (e)=>{ e.preventDefault(); const newEvent = { eventName: e.target.eventName.value, genre: e.target.genre.value, place: e.target.place.value, location: e.target.location.value }; setEvents([ ...events, newEvent ]); e.target.reset(); }; const filteredEvents = events.filter((event)=>(filterGenre === "" || event.genre === filterGenre) && (filterPlace === "" || event.place === filterPlace) && (filterLocation === "" || event.location === filterLocation)); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, "Santa Fe City Events"), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Create Event"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "eventName", placeholder: "Event Name", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "genre", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "Select Genre"), genres.map((genre)=>/*#__PURE__*/ React.createElement("option", { key: genre, value: genre, __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, genre))), /*#__PURE__*/ React.createElement("select", { name: "place", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Select Place"), places.map((place)=>/*#__PURE__*/ React.createElement("option", { key: place, value: place, __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, place))), /*#__PURE__*/ React.createElement("select", { name: "location", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Select Location"), locations.map((location)=>/*#__PURE__*/ React.createElement("option", { key: location, value: location, __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, location))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Create Event"))), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Filter Events"), /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "p-2 border border-gray-300 rounded", value: filterGenre, onChange: (e)=>setFilterGenre(e.target.value), __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "Filter by Genre"), genres.map((genre)=>/*#__PURE__*/ React.createElement("option", { key: genre, value: genre, __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, genre))), /*#__PURE__*/ React.createElement("select", { className: "p-2 border border-gray-300 rounded", value: filterPlace, onChange: (e)=>setFilterPlace(e.target.value), __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "Filter by Place"), places.map((place)=>/*#__PURE__*/ React.createElement("option", { key: place, value: place, __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, place))), /*#__PURE__*/ React.createElement("select", { className: "p-2 border border-gray-300 rounded", value: filterLocation, onChange: (e)=>setFilterLocation(e.target.value), __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "Filter by Location"), locations.map((location)=>/*#__PURE__*/ React.createElement("option", { key: location, value: location, __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, location))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "All Events"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, filteredEvents.map((event, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, event.eventName), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, "Genre: ", event.genre), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, "Place: ", event.place), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, "Location: ", event.location)))))); }