function MainComponent() { const [events, setEvents] = React.useState([]); const [newEvent, setNewEvent] = React.useState({ title: '', date: '' }); const addEvent = ()=>{ if (newEvent.title.trim() && newEvent.date.trim()) { setEvents([ ...events, newEvent ]); setNewEvent({ title: '', date: '' }); } }; const handleInputChange = (e)=>{ setNewEvent({ ...newEvent, [e.target.name]: e.target.value }); }; const sortedEvents = events.sort((a, b)=>new Date(a.date).getTime() - new Date(b.date).getTime()); return /*#__PURE__*/ React.createElement("div", { className: "p-4 md:p-8", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto space-y-4", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-center text-[#5e3200] font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "DnD Campaign Timeline"), /*#__PURE__*/ React.createElement("form", { onSubmit: (e)=>{ e.preventDefault(); addEvent(); }, className: "flex flex-col md:flex-row items-center justify-between", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "title", placeholder: "Event Title", value: newEvent.title, onChange: handleInputChange, className: "p-2 m-2 border-2 rounded font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "date", name: "date", value: newEvent.date, onChange: handleInputChange, className: "p-2 m-2 border-2 rounded font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 m-2 border-2 rounded bg-[#6d4c41] text-white font-roboto hover:bg-[#5e3200]", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Add Event")), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, sortedEvents.map((event, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex flex-col md:flex-row items-center justify-between bg-[#fffbe6] border-2 border-[#6d4c41] p-4 rounded shadow", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, event.title), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, new Date(event.date).toLocaleDateString())))))); }