function MainComponent({ lessonNumber, lessonTitle }) { const [isSidebarOpen, setIsSidebarOpen] = React.useState(false); return /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `md:w-[300px] ${isSidebarOpen ? 'block' : 'hidden'} sm:block absolute sm:relative z-10 bg-white h-full`, __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: `lesson-${lessonNumber}`, id: `lesson-${lessonNumber}`, className: "mr-2", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: `lesson-${lessonNumber}`, className: "font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, `Lesson ${lessonNumber}: ${lessonTitle}`)), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "sm:hidden p-2", onClick: ()=>setIsSidebarOpen(!isSidebarOpen), __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, "☰"))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { lessonNumber: 1, lessonTitle: "Introduction to React", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { lessonNumber: 2, lessonTitle: "Components and Props", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { lessonNumber: 3, lessonTitle: "State and Lifecycle", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { lessonNumber: 4, lessonTitle: "Handling Events", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this })); }