function MainComponent() { const [selectedSection, setSelectedSection] = React.useState(''); const sections = [ { name: 'Schedule', icon: 'fa-solid fa-list-check', color: 'text-[#28a745]' }, { name: 'Notepad', icon: 'fa-solid fa-note-sticky', color: 'text-[#ffc107]' }, { name: 'Reminders', icon: 'fa-solid fa-bell', color: 'text-[#dc3545]' }, { name: 'Calendar', icon: 'fa-solid fa-calendar', color: 'text-[#007bff]' } ]; const handleSectionClick = (sectionName)=>{ setSelectedSection(sectionName); }; const calendarComponent = /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 mt-6 rounded-lg shadow w-full", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 18, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-xl text-[#1c1c1e] mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 21 }, __self: this }, "Calendar"), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-50 rounded-lg mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between px-3 py-2 border-b border-gray-200", __source: { fileName: "", lineNumber: 22, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-1 rounded hover:bg-gray-200", __source: { fileName: "", lineNumber: 23, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-chevron-left", __source: { fileName: "", lineNumber: 23, columnNumber: 79 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 24, columnNumber: 29 }, __self: this }, "April 2023"), /*#__PURE__*/ React.createElement("button", { className: "p-1 rounded hover:bg-gray-200", __source: { fileName: "", lineNumber: 25, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-chevron-right", __source: { fileName: "", lineNumber: 25, columnNumber: 79 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-7 divide-x divide-gray-200", __source: { fileName: "", lineNumber: 28, columnNumber: 25 }, __self: this }, Array.from({ length: 35 }, (_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "border-b border-gray-200 p-2 text-sm text-center", __source: { fileName: "", lineNumber: 30, columnNumber: 33 }, __self: this }, i >= 30 ? null : i + 1))))))); const profileIcon = /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center w-10 h-10 bg-[#1c1c1e] rounded-full", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-user text-xl text-white", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this })); const titleStyle = "text-3xl font-bold text-white tracking-wider"; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center w-full min-h-screen bg-black font-sans", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl p-4 bg-black shadow rounded-lg", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6 w-full", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: titleStyle, __source: { fileName: "", lineNumber: 53, columnNumber: 21 }, __self: this }, "Assistify"), profileIcon), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, sections.map((section, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: `flex flex-col items-center p-4 bg-[#1c1c1e] text-white rounded-lg shadow-lg cursor-pointer transform duration-300 ${selectedSection === section.name ? 'scale-105 ring-2 ring-white ring-offset-2 ring-offset-black' : 'hover:scale-110'}`, onClick: ()=>handleSectionClick(section.name), __source: { fileName: "", lineNumber: 58, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${section.icon} mb-2 ${section.color} text-3xl`, __source: { fileName: "", lineNumber: 65, columnNumber: 29 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-lg", __source: { fileName: "", lineNumber: 66, columnNumber: 29 }, __self: this }, section.name)))), selectedSection === 'Calendar' && calendarComponent)); }