function MainComponent() { const [events, setEvents] = React.useState([ { id: 1, title: "Doctor's Appointment", dateTime: "April 12, 10:00 AM" }, { id: 2, title: "Soccer Game", dateTime: "April 14, 5:00 PM" } ]); const addEvent = (title, dateTime)=>{ const newEvent = { id: events.length + 1, title, dateTime }; setEvents([ ...events, newEvent ]); }; const eventList = events.map((event)=>/*#__PURE__*/ React.createElement("li", { key: event.id, className: "p-3 bg-[#f9fafb] rounded-lg fade-in", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#111827] text-sm font-medium", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, event.title), /*#__PURE__*/ React.createElement("p", { className: "text-[#6b7280] text-xs", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, event.dateTime))); const [selectedDate, setSelectedDate] = React.useState(new Date()); const handleDateChange = (date)=>{ setSelectedDate(date); }; const CalendarWidget = ()=>{ return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center animate-fadeIn", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full p-4 bg-gray-200 rounded flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { "aria-label": "Previous month", onClick: ()=>handleDateChange(selectedDate.setMonth(selectedDate.getMonth() - 1)), className: "p-2 rounded-full bg-[#10b981] text-white", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "font-medium text-lg", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, selectedDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })), /*#__PURE__*/ React.createElement("button", { "aria-label": "Next month", onClick: ()=>handleDateChange(selectedDate.setMonth(selectedDate.getMonth() + 1)), className: "p-2 rounded-full bg-[#10b981] text-white", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this })))); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen bg-[#f3f4f6] font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-[#ffffff] p-4 shadow-md", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#121212] text-2xl font-semibold", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Family Calendar"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>addEvent("New Event", new Date().toLocaleDateString()), className: "p-2 text-sm bg-[#10b981] text-white rounded-md", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "Add Event"), /*#__PURE__*/ React.createElement("button", { className: "p-2 text-sm bg-[#10b981] text-white rounded-md", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row md:space-x-4 space-y-4 md:space-y-0", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-4 md:w-1/3 animate-fadeIn", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "Upcoming Events"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-3", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, eventList)), /*#__PURE__*/ React.createElement("div", { className: "flex-grow bg-white shadow-md rounded-lg p-4", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "Monthly View"), /*#__PURE__*/ React.createElement(CalendarWidget, { __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("footer", { className: "w-full bg-[#1f2937] text-white p-4", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto text-center", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, "© 2023 Family Calendar")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate-fadeIn { animation: fadeIn 1s ease-in-out; } `)); }