function MainComponent() { const [words, setWords] = React.useState([]); const [word, setWord] = React.useState(""); const [definition, setDefinition] = React.useState(""); const [folders, setFolders] = React.useState([]); const [folderName, setFolderName] = React.useState(""); const [selectedFolder, setSelectedFolder] = React.useState(""); const handleFolderSubmit = ()=>{ if (folderName) { setFolders([ ...folders, { name: folderName, words: [], subFolders: [] } ]); setFolderName(""); } }; const handleSubmit = (e)=>{ e.preventDefault(); if (word && definition && selectedFolder) { const updatedFolders = addWordToFolder(folders, selectedFolder, { word, definition }); setFolders(updatedFolders); setWord(""); setDefinition(""); } }; const addWordToFolder = (folders, folderName, word)=>{ return folders.map((folder)=>{ if (folder.name === folderName) { return { ...folder, words: [ ...folder.words, word ] }; } if (folder.subFolders.length > 0) { return { ...folder, subFolders: addWordToFolder(folder.subFolders, folderName, word) }; } return folder; }); }; const addSubFolder = (parentFolders, parentFolderName, subFolderName)=>{ return parentFolders.map((folder)=>{ if (folder.name === parentFolderName) { return { ...folder, subFolders: [ ...folder.subFolders, { name: subFolderName, words: [], subFolders: [] } ] }; } if (folder.subFolders.length > 0) { return { ...folder, subFolders: addSubFolder(folder.subFolders, parentFolderName, subFolderName) }; } return folder; }); }; const handleAddSubFolder = (parentFolderName, subFolderName)=>{ setFolders(addSubFolder(folders, parentFolderName, subFolderName)); }; const deleteFolder = (folders, folderName)=>{ return folders.filter((folder)=>folder.name !== folderName).map((folder)=>({ ...folder, subFolders: deleteFolder(folder.subFolders, folderName) })); }; const handleDeleteFolder = (folderName)=>{ setFolders(deleteFolder(folders, folderName)); }; const updateFolderName = (folders, oldName, newName)=>{ return folders.map((folder)=>{ if (folder.name === oldName) { return { ...folder, name: newName }; } if (folder.subFolders.length > 0) { return { ...folder, subFolders: updateFolderName(folder.subFolders, oldName, newName) }; } return folder; }); }; const handleFolderNameUpdate = (oldName, newName)=>{ setFolders(updateFolderName(folders, oldName, newName)); }; const getIndentedFolderName = (folder, indent)=>`${"-".repeat(indent)} ${folder.name}`; const renderFolderOptions = (folders, indent = 0)=>{ return folders.flatMap((folder)=>[ /*#__PURE__*/ React.createElement("option", { key: folder.name, value: folder.name, __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }, getIndentedFolderName(folder, indent)), ...renderFolderOptions(folder.subFolders, indent + 1) ]); }; const renderFolders = (folders, indent = 0)=>{ return folders.map((folder)=>/*#__PURE__*/ React.createElement("div", { key: folder.name, style: { marginLeft: `${indent * 20}px` }, __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2 mb-2", __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: folder.name, onChange: (e)=>handleFolderNameUpdate(folder.name, e.target.value), className: "text-2xl font-roboto mb-4 border-b-2 border-transparent focus:outline-none focus:border-blue-500", name: "folderName", __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDeleteFolder(folder.name), className: "text-red-500 hover:text-red-700", __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 143, columnNumber: 9 }, __self: this }, folder.words.map((item, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: "bg-gray-50 p-4 rounded-md shadow-sm", __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 146, columnNumber: 15 }, __self: this }, item.word), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700", __source: { fileName: "", lineNumber: 147, columnNumber: 15 }, __self: this }, item.definition)))), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 151, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "サブフォルダ名", className: "w-full border border-gray-300 px-3 py-2 rounded-md mb-2", onKeyDown: (e)=>{ if (e.key === "Enter" && e.target.value) { handleAddSubFolder(folder.name, e.target.value); e.target.value = ""; } }, __source: { fileName: "", lineNumber: 152, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 164, columnNumber: 9 }, __self: this }, renderFolders(folder.subFolders, indent + 1)))); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4 flex", __source: { fileName: "", lineNumber: 170, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[250px] bg-white p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 171, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-4", __source: { fileName: "", lineNumber: 172, columnNumber: 9 }, __self: this }, "フォルダ"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 173, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "folderName", className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 174, columnNumber: 11 }, __self: this }, "フォルダ名"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "folderName", id: "folderName", value: folderName, onChange: (e)=>setFolderName(e.target.value), className: "w-full border border-gray-300 px-3 py-2 rounded-md mb-2", __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleFolderSubmit, className: "w-full bg-green-500 text-white py-2 rounded-md font-roboto", __source: { fileName: "", lineNumber: 188, columnNumber: 11 }, __self: this }, "フォルダを追加")), renderFolders(folders)), /*#__PURE__*/ React.createElement("div", { className: "flex-1 ml-4", __source: { fileName: "", lineNumber: 197, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto mb-4 text-center", __source: { fileName: "", lineNumber: 198, columnNumber: 9 }, __self: this }, "WordHolic"), /*#__PURE__*/ React.createElement("div", { className: "max-w-xl mx-auto bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 199, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 200, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 201, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "selectedFolder", value: selectedFolder, onChange: (e)=>setSelectedFolder(e.target.value), className: "w-full border border-gray-300 px-3 py-2 rounded-md mb-2", __source: { fileName: "", lineNumber: 202, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 208, columnNumber: 17 }, __self: this }, "フォルダを選択"), renderFolderOptions(folders))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 212, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "word", className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 213, columnNumber: 15 }, __self: this }, "単語"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "word", id: "word", value: word, onChange: (e)=>setWord(e.target.value), className: "w-full border border-gray-300 px-3 py-2 rounded-md", __source: { fileName: "", lineNumber: 219, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 228, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "definition", className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 229, columnNumber: 15 }, __self: this }, "定義"), /*#__PURE__*/ React.createElement("textarea", { name: "definition", id: "definition", rows: "3", value: definition, onChange: (e)=>setDefinition(e.target.value), className: "w-full border border-gray-300 px-3 py-2 rounded-md", __source: { fileName: "", lineNumber: 235, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white py-2 rounded-md font-roboto", __source: { fileName: "", lineNumber: 244, columnNumber: 13 }, __self: this }, "追加"))))); }