function MainComponent() { const screens = [ { icon: "fa-home", label: "Account Home" }, { icon: "fa-list", label: "Homes List" }, { icon: "fa-comments", label: "Chat with Us" }, { icon: "fa-paper-plane", label: "Send Offer" } ]; const modules = [ "Important Deadlines", "Chats", "Planning to Buy a House", "Preferences", "Connect Other Apps" ]; const [currentScreen, setCurrentScreen] = React.useState("Account Home"); const renderImportantDeadlinesModule = ()=>/*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white bg-opacity-70 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white bg-opacity-70 rounded overflow-hidden", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 p-2 text-center text-xl font-times", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Important Deadlines"), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full relative", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-red-500 w-3 h-3 rounded-full absolute top-0 right-0 mt-1 mr-1", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-center font-times", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "Upcoming Deadlines")), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-blue-500 text-white py-1 px-4 rounded font-times", name: "addDeadline", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Add Custom Deadline")))); const renderScreen = ()=>{ if (currentScreen === "Account Home") { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-times text-2xl mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Account Home"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, renderImportantDeadlinesModule(), modules.slice(1).map((module, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 bg-white bg-opacity-70 rounded-lg shadow-md font-times", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, module)))); } return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-times text-2xl mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, currentScreen)); }; const backgroundImageStyle = currentScreen === "Account Home" ? { backgroundImage: "linear-gradient(to bottom, #add8e6, #ffffff)" } : {}; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen relative", style: backgroundImageStyle, __source: { fileName: "", lineNumber: 75, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 right-0 p-4", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-cog text-2xl text-gray-600", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-grow relative", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, renderScreen(), currentScreen === "Account Home" && /*#__PURE__*/ React.createElement("img", { src: "/house-image.png", alt: "cartoon house in nature", className: "absolute bottom-[60px] left-1/2 transform -translate-x-1/2 w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "h-[60px] bg-gray-800 w-full flex justify-around items-center", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, screens.map((screen, index)=>{ const handleClick = ()=>setCurrentScreen(screen.label); return /*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-col items-center text-white cursor-pointer", onClick: handleClick, __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${screen.icon} text-2xl`, __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs font-times", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, screen.label)); }))); } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 108, columnNumber: 1 }, __self: this }, ` .font-times { font-family: 'Times New Roman', Times, serif; font-weight: bold; } `);