function PitchBlackProject({ headerContent, footerContent, sidebarContent, panelContent, mainContent, collapseWindow }) { const [isCollapsed, setIsCollapsed] = React.useState({ sidebar: false, panel: false }); const toggleCollapse = (windowName)=>{ setIsCollapsed((prevState)=>({ ...prevState, [windowName]: !prevState[windowName] })); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-[#000000]", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-white border-b border-[#444] p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, headerContent, /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleCollapse("sidebar"), className: "md:hidden lg:inline-block", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "Toggle Sidebar"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleCollapse("panel"), className: "inline-block", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "Toggle Panel")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-1 overflow-hidden", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: `transform transition-transform ${isCollapsed.sidebar ? "-translate-x-full" : "translate-x-0"} md:w-0 overflow-hidden md:overflow-visible lg:block lg:w-60 xl:w-80 bg-[#111] text-white border-r border-[#444] p-4`, __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, sidebarContent), /*#__PURE__*/ React.createElement("main", { className: "flex-1 bg-[#222] text-white p-4 overflow-auto", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border border-[#444] rounded-lg", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, mainContent)), /*#__PURE__*/ React.createElement("aside", { className: `transform transition-transform ${isCollapsed.panel ? "-translate-x-full" : "translate-x-0"} w-1/3 bg-[#333] text-white border-l border-[#444] p-4`, __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, panelContent)), /*#__PURE__*/ React.createElement("footer", { className: "text-white border-t border-[#444] p-4", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, footerContent)); } function PitchBlackProjectStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PitchBlackProject, { headerContent: "Header Content", footerContent: "Footer Content", sidebarContent: "Sidebar Content", mainContent: "Main Content", panelContent: "Panel Content", collapseWindow: "sidebar", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this })); } function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "h-screen bg-[#333333] border-4 border-black", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full p-2", style: { border: '2px solid', borderColor: 'transparent', animation: 'color-change 5s infinite' }, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(PitchBlackProject, { headerContent: "Header Content", footerContent: "Footer Content", sidebarContent: "Sidebar Content", mainContent: "Main Content", panelContent: "Panel Content", collapseWindow: "sidebar", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, ` @keyframes color-change { 0% {border-color: #ff0000;} 25% {border-color: #00ff00;} 50% {border-color: #0000ff;} 75% {border-color: #ff00ff;} 100% {border-color: #ff0000;} } `)); }