function MainComponent() { const [sidebarExpanded, setSidebarExpanded] = React.useState(true); const [actionPanelExpanded, setActionPanelExpanded] = React.useState(true); return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen bg-gray-900 text-white", __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: `bg-opacity-50 bg-gray-800 backdrop-blur-md transition-all duration-300 ease-in-out ${sidebarExpanded ? 'w-64' : 'w-16'}`, __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-full", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSidebarExpanded(!sidebarExpanded), className: "text-2xl p-2 rounded-full bg-gray-700 hover:bg-gray-600 transition-all duration-300 ease-in-out transform hover:scale-110 hover:shadow-lg", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${sidebarExpanded ? 'fa-chevron-left' : 'fa-chevron-right'}`, __source: { fileName: "", lineNumber: 11, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("nav", { className: "flex-grow", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 16, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block p-2 hover:bg-gray-700 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg", __source: { fileName: "", lineNumber: 16, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home mr-2", __source: { fileName: "", lineNumber: 16, columnNumber: 164 }, __self: this }), sidebarExpanded && 'Dashboard')), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block p-2 hover:bg-gray-700 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg", __source: { fileName: "", lineNumber: 18, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file-alt mr-2", __source: { fileName: "", lineNumber: 18, columnNumber: 162 }, __self: this }), sidebarExpanded && 'Content Types'), sidebarExpanded && /*#__PURE__*/ React.createElement("ul", { className: "ml-4 space-y-1", __source: { fileName: "", lineNumber: 20, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 21, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block p-1 hover:bg-gray-700 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg", __source: { fileName: "", lineNumber: 21, columnNumber: 25 }, __self: this }, "Posts")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 22, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block p-1 hover:bg-gray-700 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg", __source: { fileName: "", lineNumber: 22, columnNumber: 25 }, __self: this }, "Pages")))), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block p-2 hover:bg-gray-700 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg", __source: { fileName: "", lineNumber: 27, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cogs mr-2", __source: { fileName: "", lineNumber: 27, columnNumber: 162 }, __self: this }), sidebarExpanded && 'Systems'), sidebarExpanded && /*#__PURE__*/ React.createElement("ul", { className: "ml-4 space-y-1", __source: { fileName: "", lineNumber: 29, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 30, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block p-1 hover:bg-gray-700 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg", __source: { fileName: "", lineNumber: 30, columnNumber: 25 }, __self: this }, "Products")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 31, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block p-1 hover:bg-gray-700 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg", __source: { fileName: "", lineNumber: 31, columnNumber: 25 }, __self: this }, "Inventory")))))), /*#__PURE__*/ React.createElement("div", { className: "mt-auto p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search", className: "w-full p-2 bg-gray-700 text-white rounded-lg focus:ring-2 focus:ring-blue-500 transition-all duration-300 ease-in-out", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block p-2 hover:bg-gray-700 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user mr-2", __source: { fileName: "", lineNumber: 40, columnNumber: 160 }, __self: this }), sidebarExpanded && 'Profile'), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block p-2 hover:bg-gray-700 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog mr-2", __source: { fileName: "", lineNumber: 41, columnNumber: 160 }, __self: this }), sidebarExpanded && 'Settings'), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block p-2 hover:bg-gray-700 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-question-circle mr-2", __source: { fileName: "", lineNumber: 42, columnNumber: 160 }, __self: this }), sidebarExpanded && 'Help'))))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col overflow-hidden", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-gray-800 bg-opacity-50 backdrop-blur-md shadow-lg", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center p-4", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-300", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "Home > Content Types > Blog Posts")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-2 rounded-full hover:bg-gray-700 transition-all duration-300 ease-in-out transform hover:scale-110 hover:shadow-lg", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "p-2 rounded-full hover:bg-gray-700 transition-all duration-300 ease-in-out transform hover:scale-110 hover:shadow-lg", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "p-2 rounded-full hover:bg-gray-700 transition-all duration-300 ease-in-out transform hover:scale-110 hover:shadow-lg", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-circle", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 overflow-x-hidden overflow-y-auto bg-gray-800 p-4", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-700 rounded-lg shadow-lg p-4 transition-all duration-300 ease-in-out transform hover:scale-105", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "Blog Posts"), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-600", __source: { fileName: "", lineNumber: 74, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider", __source: { fileName: "", lineNumber: 75, columnNumber: 21 }, __self: this }, "Title"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider", __source: { fileName: "", lineNumber: 76, columnNumber: 21 }, __self: this }, "Author"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider", __source: { fileName: "", lineNumber: 77, columnNumber: 21 }, __self: this }, "Date"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider", __source: { fileName: "", lineNumber: 78, columnNumber: 21 }, __self: this }, "Status"))), /*#__PURE__*/ React.createElement("tbody", { className: "bg-gray-700 divide-y divide-gray-600", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "hover:bg-gray-600 transition-all duration-300 ease-in-out", __source: { fileName: "", lineNumber: 82, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 83, columnNumber: 21 }, __self: this }, "Sample Blog Post"), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 84, columnNumber: 21 }, __self: this }, "John Doe"), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 85, columnNumber: 21 }, __self: this }, "2024-01-01"), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 86, columnNumber: 21 }, __self: this }, "Published")))))))), /*#__PURE__*/ React.createElement("aside", { className: `bg-gray-800 bg-opacity-50 backdrop-blur-md transition-all duration-300 ease-in-out ${actionPanelExpanded ? 'w-64' : 'w-0'} overflow-hidden`, __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActionPanelExpanded(!actionPanelExpanded), className: "text-2xl p-2 rounded-full bg-gray-700 hover:bg-gray-600 transition-all duration-300 ease-in-out transform hover:scale-110 hover:shadow-lg", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${actionPanelExpanded ? 'fa-chevron-right' : 'fa-chevron-left'}`, __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this })), actionPanelExpanded && /*#__PURE__*/ React.createElement("div", { className: "mt-4 space-y-4", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-full bg-blue-600 text-white p-2 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg hover:bg-blue-500", __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this }, "Add New"), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-green-600 text-white p-2 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg hover:bg-green-500", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, "Save"), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-red-600 text-white p-2 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg hover:bg-red-500", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, "Delete"), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-gray-600 text-white p-2 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg hover:bg-gray-500", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, "Export")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }, ` @keyframes glow { 0% { box-shadow: 0 0 5px rgba(66, 153, 225, 0.5); } 50% { box-shadow: 0 0 20px rgba(66, 153, 225, 0.8); } 100% { box-shadow: 0 0 5px rgba(66, 153, 225, 0.5); } } .hover\:shadow-lg:hover { animation: glow 2s infinite; } .transform { transition: transform 0.3s ease-in-out; } .hover\:scale-105:hover, .hover\:scale-110:hover { transform: scale(1.05); } `)); }