function MainComponent() { const [isNavOpen, setIsNavOpen] = React.useState(false); const [selectedEmail, setSelectedEmail] = React.useState(null); const [emails, setEmails] = React.useState([]); const [emailContent, setEmailContent] = React.useState(null); const displayEmails = (category)=>{ // This function would ideally fetch and set emails based on the category setEmails([]); // Assume this fetches and sets emails based on category }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row h-screen", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `md:flex flex-col ${isNavOpen ? "flex" : "hidden"} transition-transform duration-500 absolute md:static bg-white z-10 h-full`, __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "btn btn-primary m-4 md:hidden", onClick: ()=>setIsNavOpen(!isNavOpen), __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "btn btn-primary m-4 hidden md:block", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "New Email"), /*#__PURE__*/ React.createElement("nav", { className: "flex flex-col", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-4 hover:bg-gray-200", onClick: ()=>displayEmails("inbox"), __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Inbox"), /*#__PURE__*/ React.createElement("button", { className: "p-4 hover:bg-gray-200", onClick: ()=>displayEmails("draft"), __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "Draft"), /*#__PURE__*/ React.createElement("button", { className: "p-4 hover:bg-gray-200", onClick: ()=>displayEmails("sent"), __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "Sent"))), /*#__PURE__*/ React.createElement("div", { className: "flex-auto overflow-auto md:block hidden", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-4 p-4", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, emails.map((email, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border rounded-lg p-4 flex items-center cursor-pointer", onClick: ()=>setEmailContent(email), __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `fas ${selectedEmail === email ? "fa-check" : "fa-envelope"}`, __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col ml-4", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 30, columnNumber: 17 }, __self: this }, email.sender || email.senderEmail), /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }, email.title)))))), emailContent && /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4 border rounded-lg", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 font-semibold", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, emailContent.title), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "From: ", emailContent.senderEmail), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "To: ", emailContent.receiverEmail), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, emailContent.body), /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-4 border rounded-lg mb-4", name: "reply", rows: "4", placeholder: "Reply...", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "btn btn-primary", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "Reply")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, ` @media (max-width: 768px) { .md:hidden { display: block; } .md:block { display: none; } } `)); }