function MainComponent() { const [folders, setFolders] = React.useState([]); const [currentFolder, setCurrentFolder] = React.useState(null); const [isTestMode, setIsTestMode] = React.useState(false); const [currentCardIndex, setCurrentCardIndex] = React.useState(0); const [userAnswer, setUserAnswer] = React.useState(""); const [showAnswer, setShowAnswer] = React.useState(false); const [showUncheckedOnly, setShowUncheckedOnly] = React.useState(false); const [showFolders, setShowFolders] = React.useState(true); const addFolder = (parentFolderId = null)=>{ const folderName = prompt("Enter folder name:"); if (folderName) { const newFolder = { id: Date.now(), name: folderName, parentId: parentFolderId, subFolders: [], cards: [] }; setFolders([ ...folders, newFolder ]); } }; const addCard = (folderId)=>{ const front = prompt("Enter front of the card:"); const back = prompt("Enter back of the card:"); if (front && back) { const card = { id: Date.now(), front, back, bookmarked: false, checked: false }; const updatedFolders = folders.map((folder)=>folder.id === folderId ? { ...folder, cards: [ ...folder.cards, card ] } : folder); setFolders(updatedFolders); } }; const editFolderName = (folderId)=>{ const newName = prompt("Enter new folder name:"); if (newName) { const updatedFolders = folders.map((folder)=>folder.id === folderId ? { ...folder, name: newName } : folder); setFolders(updatedFolders); } }; const editCard = (folderId, cardId, newFront, newBack)=>{ const updatedFolders = folders.map((folder)=>{ if (folder.id === folderId) { const updatedCards = folder.cards.map((card)=>card.id === cardId ? { ...card, front: newFront, back: newBack } : card); return { ...folder, cards: updatedCards }; } return folder; }); setFolders(updatedFolders); }; const deleteFolder = (folderId)=>{ const updatedFolders = folders.filter((folder)=>folder.id !== folderId && folder.parentId !== folderId); setFolders(updatedFolders); }; const deleteCard = (folderId, cardId)=>{ const updatedFolders = folders.map((folder)=>{ if (folder.id === folderId) { return { ...folder, cards: folder.cards.filter((card)=>card.id !== cardId) }; } return folder; }); setFolders(updatedFolders); }; const toggleBookmark = (folderId, cardId)=>{ const updatedFolders = folders.map((folder)=>{ if (folder.id === folderId) { const updatedCards = folder.cards.map((card)=>card.id === cardId ? { ...card, bookmarked: !card.bookmarked } : card); return { ...folder, cards: updatedCards }; } return folder; }); setFolders(updatedFolders); }; const toggleChecked = (folderId, cardId)=>{ const updatedFolders = folders.map((folder)=>{ if (folder.id === folderId) { const updatedCards = folder.cards.map((card)=>card.id === cardId ? { ...card, checked: !card.checked } : card); return { ...folder, cards: updatedCards }; } return folder; }); setFolders(updatedFolders); }; const startTestMode = (folderId)=>{ setIsTestMode(true); setCurrentFolder(folderId); setCurrentCardIndex(0); setUserAnswer(""); setShowAnswer(false); }; const handleNextCard = ()=>{ setCurrentCardIndex((prevIndex)=>prevIndex + 1); setUserAnswer(""); setShowAnswer(false); }; const handleAnswer = ()=>{ setShowAnswer(true); }; const handleShowUncheckedOnly = ()=>{ setShowUncheckedOnly(!showUncheckedOnly); }; const handleFolderClick = (folderId)=>{ setCurrentFolder(folderId); }; const toggleShowFolders = ()=>{ setShowFolders(!showFolders); }; const filteredCards = (folder)=>showUncheckedOnly ? folder.cards.filter((card)=>!card.checked) : folder.cards; const renderFolders = (parentId = null, depth = 0)=>{ return folders.filter((folder)=>folder.parentId === parentId).map((folder)=>/*#__PURE__*/ React.createElement("div", { key: folder.id, className: `pl-${depth * 4}`, __source: { fileName: "", lineNumber: 119, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { onClick: ()=>handleFolderClick(folder.id), className: "cursor-pointer flex items-center", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, folder.subFolders.length > 0 ? "📁" : "📄", " ", folder.name), /*#__PURE__*/ React.createElement("button", { onClick: ()=>editFolderName(folder.id), className: "text-[#444444] ml-2", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, "✏️"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>deleteFolder(folder.id), className: "text-red-500 ml-2", __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this }, "❌"), depth < 2 && /*#__PURE__*/ React.createElement("button", { onClick: ()=>addFolder(folder.id), className: "text-[#444444] ml-2", __source: { fileName: "", lineNumber: 126, columnNumber: 25 }, __self: this }, "➕")), renderFolders(folder.id, depth + 1), depth === 2 && currentFolder === folder.id && /*#__PURE__*/ React.createElement("button", { onClick: ()=>addCard(folder.id), className: "text-[#444444] ml-6 mt-2", __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, "Add Card"))); }; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen", __source: { fileName: "", lineNumber: 137, columnNumber: 5 }, __self: this }, !isTestMode && showFolders && /*#__PURE__*/ React.createElement("div", { className: "w-[300px] p-4 border-r border-gray-200", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>addFolder(), className: "text-blue-500", __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }, "New Folder"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this }, renderFolders())), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4", __source: { fileName: "", lineNumber: 144, columnNumber: 7 }, __self: this }, isTestMode ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 146, columnNumber: 11 }, __self: this }, currentFolder && filteredCards(folders.find((folder)=>folder.id === currentFolder)).length > currentCardIndex ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 148, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-blue-500 mb-4", __source: { fileName: "", lineNumber: 149, columnNumber: 17 }, __self: this }, folders.find((folder)=>folder.id === currentFolder).cards[currentCardIndex].front), showAnswer && /*#__PURE__*/ React.createElement("div", { className: "text-green-500 mb-4", __source: { fileName: "", lineNumber: 151, columnNumber: 19 }, __self: this }, folders.find((folder)=>folder.id === currentFolder).cards[currentCardIndex].back), /*#__PURE__*/ React.createElement("input", { type: "text", name: "answer", value: userAnswer, onChange: (e)=>setUserAnswer(e.target.value), className: "border p-2 mb-4 w-full", __source: { fileName: "", lineNumber: 155, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 162, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleAnswer, className: "mr-2 text-blue-500", __source: { fileName: "", lineNumber: 163, columnNumber: 19 }, __self: this }, "Answer"), showAnswer && /*#__PURE__*/ React.createElement("button", { onClick: handleNextCard, className: "text-green-500", __source: { fileName: "", lineNumber: 165, columnNumber: 21 }, __self: this }, "OK"))) : /*#__PURE__*/ React.createElement("div", { className: "text-gray-500", __source: { fileName: "", lineNumber: 170, columnNumber: 15 }, __self: this }, "No more cards")) : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 174, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleShowUncheckedOnly, className: "mb-4 text-blue-500", __source: { fileName: "", lineNumber: 175, columnNumber: 13 }, __self: this }, showUncheckedOnly ? "Show All Cards" : "Show Unchecked Only"), /*#__PURE__*/ React.createElement("button", { onClick: toggleShowFolders, className: "mb-4 ml-4 text-blue-500", __source: { fileName: "", lineNumber: 178, columnNumber: 13 }, __self: this }, showFolders ? "Hide Folders" : "Show Folders"), currentFolder && filteredCards(folders.find((folder)=>folder.id === currentFolder)).map((card)=>/*#__PURE__*/ React.createElement("div", { key: card.id, className: "border p-4 mb-2", __source: { fileName: "", lineNumber: 183, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 184, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 185, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { contentEditable: true, onBlur: (e)=>{ const front = e.target.innerText; editCard(currentFolder, card.id, front, card.back); }, className: "mb-2", __source: { fileName: "", lineNumber: 186, columnNumber: 23 }, __self: this }, card.front), /*#__PURE__*/ React.createElement("div", { contentEditable: true, onBlur: (e)=>{ const back = e.target.innerText; editCard(currentFolder, card.id, card.front, back); }, className: "mb-2", __source: { fileName: "", lineNumber: 191, columnNumber: 23 }, __self: this }, card.back)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 197, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleBookmark(currentFolder, card.id), className: `${card.bookmarked ? "text-yellow-500" : "text-gray-500"} mx-2`, __source: { fileName: "", lineNumber: 198, columnNumber: 23 }, __self: this }, card.bookmarked ? '🔖' : '🔖'), /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleChecked(currentFolder, card.id), className: `${card.checked ? "text-green-500" : "text-gray-500"} mx-2`, __source: { fileName: "", lineNumber: 199, columnNumber: 23 }, __self: this }, card.checked ? '✔️' : '⏲️'), /*#__PURE__*/ React.createElement("button", { onClick: ()=>deleteCard(currentFolder, card.id), className: "text-red-500 mx-2", __source: { fileName: "", lineNumber: 200, columnNumber: 23 }, __self: this }, "❌"))))))), !isTestMode && /*#__PURE__*/ React.createElement("button", { onClick: ()=>startTestMode(currentFolder), className: "fixed bottom-4 right-4 p-4 bg-blue-500 text-white rounded-full", __source: { fileName: "", lineNumber: 210, columnNumber: 9 }, __self: this }, "Test Mode"), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 212, columnNumber: 7 }, __self: this }, ` .pl-0 { padding-left: 0; } .pl-4 { padding-left: 1rem; } .pl-8 { padding-left: 2rem; } `)); }