function MainComponent() { const [menuOpen, setMenuOpen] = React.useState(false); function toggleMenu() { setMenuOpen(!menuOpen); } const sidebarClassName = menuOpen ? 'transform translate-x-0 ease-out' : 'transform -translate-x-full ease-in'; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex h-screen bg-gray-100", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `fixed z-30 inset-y-0 left-0 w-64 overflow-y-auto bg-white shadow-xl ${sidebarClassName}`, __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-8", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-16 w-full flex items-center", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/logo.png", alt: "Admin Panel Logo", className: "h-8", __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("ul", { className: "mt-12", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "flex w-full justify-between text-gray-600 hover:text-indigo-700 cursor-pointer items-center mb-6", __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 22, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tachometer-alt text-sm pr-4", __source: { fileName: "", lineNumber: 23, columnNumber: 19 }, __self: this }), "Dashboard")), /*#__PURE__*/ React.createElement("li", { className: "flex w-full justify-between text-gray-600 hover:text-indigo-700 cursor-pointer items-center mb-6", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 28, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-sm pr-4", __source: { fileName: "", lineNumber: 29, columnNumber: 19 }, __self: this }), "Users")), /*#__PURE__*/ React.createElement("li", { className: "flex w-full justify-between text-gray-600 hover:text-indigo-700 cursor-pointer items-center mb-6", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-folder text-sm pr-4", __source: { fileName: "", lineNumber: 35, columnNumber: 19 }, __self: this }), "Projects"))))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col overflow-hidden", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center p-6 bg-white border-b border-gray-200", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4 lg:space-x-0", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-gray-500 focus:outline-none lg:hidden", onClick: toggleMenu, __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-semibold font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, "Admin Dashboard"), /*#__PURE__*/ React.createElement("div", { className: "text-sm font-roboto text-gray-600", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, "Good Morning, John Doe"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "flex mr-4 text-gray-600 focus:outline-none", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("img", { className: "h-10 w-10 rounded-full object-cover", src: "/user-profile.jpg", alt: "User avatar", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 overflow-x-hidden overflow-y-auto bg-gray-200", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-6 py-8", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-6", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-6 sm:w-1/2 xl:w-1/3", __source: { fileName: "", lineNumber: 64, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center px-5 py-6 shadow-sm rounded-md bg-white", __source: { fileName: "", lineNumber: 65, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-3 rounded-full bg-indigo-600 bg-opacity-75", __source: { fileName: "", lineNumber: 66, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-users text-white", __source: { fileName: "", lineNumber: 67, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mx-5", __source: { fileName: "", lineNumber: 69, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-2xl font-semibold text-gray-700", __source: { fileName: "", lineNumber: 70, columnNumber: 25 }, __self: this }, "8,282"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500", __source: { fileName: "", lineNumber: 71, columnNumber: 25 }, __self: this }, "New Users")))), /*#__PURE__*/ React.createElement("div", { className: "w-full px-6 sm:w-1/2 xl:w-1/3", __source: { fileName: "", lineNumber: 75, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center px-5 py-6 shadow-sm rounded-md bg-white", __source: { fileName: "", lineNumber: 76, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-3 rounded-full bg-green-600 bg-opacity-75", __source: { fileName: "", lineNumber: 77, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-dollar-sign text-white", __source: { fileName: "", lineNumber: 78, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mx-5", __source: { fileName: "", lineNumber: 80, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-2xl font-semibold text-gray-700", __source: { fileName: "", lineNumber: 81, columnNumber: 25 }, __self: this }, "$24,300"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500", __source: { fileName: "", lineNumber: 82, columnNumber: 25 }, __self: this }, "Total Revenue")))), /*#__PURE__*/ React.createElement("div", { className: "w-full px-6 sm:w-1/2 xl:w-1/3", __source: { fileName: "", lineNumber: 86, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center px-5 py-6 shadow-sm rounded-md bg-white", __source: { fileName: "", lineNumber: 87, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-3 rounded-full bg-pink-600 bg-opacity-75", __source: { fileName: "", lineNumber: 88, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-shopping-cart text-white", __source: { fileName: "", lineNumber: 89, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mx-5", __source: { fileName: "", lineNumber: 91, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-2xl font-semibold text-gray-700", __source: { fileName: "", lineNumber: 92, columnNumber: 25 }, __self: this }, "200"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500", __source: { fileName: "", lineNumber: 93, columnNumber: 25 }, __self: this }, "Total Orders")))))))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, ` .transition-width { transition: width 0.4s, margin 0.4s; } `)); }