function MainComponent({ folders, cards, onEditFront, onEditBack, onAddCard, onAddFolder, onToggleBookmark, onToggleCheck, testMode, onEnterAnswer, filtered }) { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, folders.map((folder)=>/*#__PURE__*/ React.createElement("div", { key: folder.id, className: "mb-4", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, folder.name), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, folder.subFolders.map((subFolder)=>/*#__PURE__*/ React.createElement("div", { key: subFolder.id, className: "ml-4 mb-2", __source: { fileName: "", lineNumber: 9, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-semibold", __source: { fileName: "", lineNumber: 10, columnNumber: 17 }, __self: this }, subFolder.name), /*#__PURE__*/ React.createElement(MainComponent, { folders: [ subFolder ], cards: cards, onEditFront: onEditFront, onEditBack: onEditBack, onAddCard: onAddCard, onAddFolder: onAddFolder, onToggleBookmark: onToggleBookmark, onToggleCheck: onToggleCheck, testMode: testMode, onEnterAnswer: onEnterAnswer, filtered: filtered, __source: { fileName: "", lineNumber: 11, columnNumber: 17 }, __self: this }))), cards.filter((card)=>card.folderId === folder.id && (filtered !== 'all' ? card[filtered] : true)).map((card)=>/*#__PURE__*/ React.createElement("div", { key: card.id, className: "border p-2 mb-2 relative", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 left-2", onClick: ()=>onToggleBookmark(card.id), __source: { fileName: "", lineNumber: 28, columnNumber: 17 }, __self: this }, card.bookmarked ? /*#__PURE__*/ React.createElement("i", { className: "fa fa-bookmark text-[#121212]", __source: { fileName: "", lineNumber: 29, columnNumber: 38 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fa fa-bookmark-o text-[#121212]", __source: { fileName: "", lineNumber: 29, columnNumber: 88 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-2 right-2", onClick: ()=>onToggleCheck(card.id), __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }, card.checked ? /*#__PURE__*/ React.createElement("i", { className: "fa fa-check-square text-[#121212]", __source: { fileName: "", lineNumber: 32, columnNumber: 35 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fa fa-square-o text-[#121212]", __source: { fileName: "", lineNumber: 32, columnNumber: 89 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, testMode.active ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 37, columnNumber: 23 }, __self: this }, card.front), /*#__PURE__*/ React.createElement("input", { type: "text", name: `answer-${card.id}`, className: "border p-1 w-full", placeholder: "Enter your answer", onChange: (e)=>onEnterAnswer(card.id, e.target.value), __source: { fileName: "", lineNumber: 38, columnNumber: 23 }, __self: this })) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("textarea", { name: `front-${card.id}`, className: "w-full mb-2 border p-1", value: card.front, onChange: (e)=>onEditFront(card.id, e.target.value), __source: { fileName: "", lineNumber: 42, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: `back-${card.id}`, className: "w-full mb-2 border p-1", value: card.back, onChange: (e)=>onEditBack(card.id, e.target.value), __source: { fileName: "", lineNumber: 43, columnNumber: 23 }, __self: this }))))), /*#__PURE__*/ React.createElement("button", { className: "mt-2 p-1 bg-blue-500 text-white", onClick: ()=>onAddCard(folder.id), __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Add Card"), /*#__PURE__*/ React.createElement("button", { className: "mt-2 ml-2 p-1 bg-green-500 text-white", onClick: ()=>onAddFolder(folder.id), __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Add Folder")))), filtered !== 'none' && /*#__PURE__*/ React.createElement("button", { className: "fixed bottom-4 right-4 p-2 bg-red-500 text-white", onClick: testMode.toggle, __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, testMode.active ? 'Exit Test Mode' : 'Start Test Mode')); } function StoryComponent() { const folders = [ { id: 1, name: "Folder 1", subFolders: [ { id: 2, name: "Subfolder 1-1", subFolders: [] } ] } ]; const cards = [ { id: 1, folderId: 1, front: "Question 1", back: "Answer 1", bookmarked: true, checked: false }, { id: 2, folderId: 1, front: "Question 2", back: "Answer 2", bookmarked: false, checked: true } ]; const [testMode, setTestMode] = React.useState({ active: false }); const toggleTestMode = ()=>setTestMode({ active: !testMode.active }); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 78, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { folders: folders, cards: cards, onEditFront: ()=>{}, onEditBack: ()=>{}, onAddCard: ()=>{}, onAddFolder: ()=>{}, onToggleBookmark: ()=>{}, onToggleCheck: ()=>{}, testMode: { ...testMode, toggle: toggleTestMode }, onEnterAnswer: ()=>{}, filtered: "all", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this })); }