function MainComponent() { const categories = [ { name: "Electronics", items: 120 }, { name: "Clothing", items: 75 }, { name: "Food", items: 200 }, { name: "Toys", items: 50 }, { name: "Furniture", items: 30 } ]; const [isMenuOpen, setIsMenuOpen] = React.useState(false); return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "fixed top-4 left-4 text-white bg-[#121212] p-2 rounded-full", onClick: ()=>setIsMenuOpen(true), __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("nav", { className: `fixed top-0 left-0 h-full bg-[#121212] text-white p-4 transition-transform transform ${isMenuOpen ? "translate-x-0" : "-translate-x-full"}`, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "absolute top-4 right-4 text-white bg-[#121212] p-2 rounded-full", onClick: ()=>setIsMenuOpen(false), __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("ul", { className: "mt-16", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, categories.map((category, index)=>/*#__PURE__*/ React.createElement("li", { className: "py-2", key: index, __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, category.name))), /*#__PURE__*/ React.createElement("li", { className: "py-2", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Add Category")))), /*#__PURE__*/ React.createElement("div", { className: `flex-1 p-8 ml-0 transition-all ${isMenuOpen ? 'lg:ml-[250px]' : ''}`, __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Categories"), /*#__PURE__*/ React.createElement("button", { className: "text-white bg-[#121212] p-2 rounded-full", onClick: ()=>alert('Add new expenditure or stock'), __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, categories.map((category, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-4 rounded-lg shadow-md hover:shadow-lg cursor-pointer", onClick: ()=>alert(`View more details about ${category.name}`), __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, category.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, "Items remaining: ", category.items)))))); }