function MainComponent({ isMinimized, toggleMinimize }) { return /*#__PURE__*/ React.createElement("div", { className: `w-[${isMinimized ? '0px' : '240px'}] h-full bg-white flex flex-col items-center p-[12px] overflow-hidden transition-all duration-300 font-montserrat`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, !isMinimized && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "px-3 flex w-full justify-between items-center", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://module.blog/wp-content/uploads/werp_logo_L.svg", alt: "Company logo", className: "h-8 w-auto", __source: { fileName: "", lineNumber: 7, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-transparent border-none p-3 cursor-pointer flex items-center justify-center w-[28px] h-[28px]", onClick: toggleMinimize, __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://module.blog/wp-content/uploads/x.svg", alt: "Minimize button", className: "w-4 h-4", __source: { fileName: "", lineNumber: 9, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex w-full mb-3 py-3 px-12 bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://module.blog/wp-content/uploads/search.svg", alt: "Search icon", className: "w-6 h-6 mr-2", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search...", className: "bg-[#424242] text-white placeholder-[#999] border-none p-2 flex-1", name: "search", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full space-y-3 mt-3", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, [ { icon: "https://module.blog/wp-content/uploads/home.svg", label: "Home" }, { icon: "https://module.blog/wp-content/uploads/calendar.svg", label: "Calendar" }, { icon: "https://module.blog/wp-content/uploads/building-warehouse.svg", label: "Inventory" }, { icon: "https://module.blog/wp-content/uploads/users.svg", label: "Users" }, { icon: "https://module.blog/wp-content/uploads/settings.svg", label: "Settings" } ].map(({ icon, label })=>/*#__PURE__*/ React.createElement("div", { key: icon, className: "flex items-center py-3 px-12 bg-[#f0f0f0] w-full", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: icon, alt: `${label} icon`, className: "h-7 w-7 mr-2", __source: { fileName: "", lineNumber: 25, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-[16px] font-semibold text-[#121212] w-[184px]", __source: { fileName: "", lineNumber: 26, columnNumber: 17 }, __self: this }, label)))), /*#__PURE__*/ React.createElement("div", { className: "mt-auto mb-4 p-3", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://module.blog/wp-content/uploads/favicon.png", alt: "Workspace icon", className: "w-6 h-6 mr-2", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#121212]", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "Creators Team Inc."), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-[#999]", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "Enterprise Plan"), /*#__PURE__*/ React.createElement("img", { src: "https://module.blog/wp-content/uploads/logout.svg", alt: "Logout icon", className: "h-4 w-4 mt-2", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this })))); } function StoryComponent() { const [isMinimized1, setIsMinimized1] = React.useState(false); const [isMinimized2, setIsMinimized2] = React.useState(true); return /*#__PURE__*/ React.createElement("div", { className: "flex w-screen h-screen", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { isMinimized: isMinimized1, toggleMinimize: ()=>setIsMinimized1(!isMinimized1), __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { isMinimized: isMinimized2, toggleMinimize: ()=>setIsMinimized2(!isMinimized2), __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this })); }