function MainComponent() { const [userEmails, setUserEmails] = React.useState([]); const [email, setEmail] = React.useState(""); const [currentPage, setCurrentPage] = React.useState("Users"); const handleInviteUser = (e)=>{ e.preventDefault(); if (!userEmails.includes(email) && email) { setUserEmails([ ...userEmails, email ]); setEmail(""); } }; const handleDeleteUser = (emailToDelete)=>{ setUserEmails(userEmails.filter((email)=>email !== emailToDelete)); }; const handleEmailChange = (e)=>{ setEmail(e.target.value); }; const handleNavigation = (page)=>()=>{ setCurrentPage(page); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen bg-[#F4F7F6] p-6", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row md:justify-between md:items-start", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "md:w-1/4 p-4 bg-white rounded-lg shadow mb-6 md:mb-0", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { onClick: handleNavigation("Users"), className: "font-roboto text-[#121212] mb-4 cursor-pointer hover:text-[#007BFF]", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "Users"), /*#__PURE__*/ React.createElement("li", { onClick: handleNavigation("Billing"), className: "font-roboto text-[#121212] cursor-pointer hover:text-[#007BFF]", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "Billing"))), /*#__PURE__*/ React.createElement("main", { className: "md:w-3/4 bg-white rounded-lg shadow p-6", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, currentPage === "Users" && /*#__PURE__*/ React.createElement("section", { id: "users", className: "mb-10", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "Users"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleInviteUser, className: "mb-6", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", value: email, onChange: handleEmailChange, name: "email", className: "p-2 border border-[#ccc] rounded-lg mr-2", placeholder: "Invite user by email", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#007BFF] text-white p-2 rounded-lg", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, "Invite")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, userEmails.map((userEmail, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 21 }, __self: this }, userEmail, " ", /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDeleteUser(userEmail), className: "ml-4 text-red-500", __source: { fileName: "", lineNumber: 47, columnNumber: 35 }, __self: this }, "🗑️")))))), currentPage === "Billing" && /*#__PURE__*/ React.createElement("section", { id: "billing", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, "Billing"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, "Current Plan: Basic"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#007BFF] font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, "Manage subscription on Stripe")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto font-bold text-[#121212] mb-2", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, "Billing History")))))); }