function MainComponent() { const [tags, setTags] = React.useState([ { id: 1, name: "Work", children: [] }, { id: 2, name: "Personal", children: [] }, { id: 3, name: "Important", children: [] } ]); const [selectedTag, setSelectedTag] = React.useState(null); const [bookmarks, setBookmarks] = React.useState([]); const [newTag, setNewTag] = React.useState(""); const [newBookmark, setNewBookmark] = React.useState({ title: "", url: "", tags: [] }); const [searchTerm, setSearchTerm] = React.useState(""); const handleAddTag = (e)=>{ e.preventDefault(); const tagParts = newTag.trim().split('/'); let parentTag = null; tagParts.forEach((part, index)=>{ const existingTag = (parentTag ? parentTag.children : tags).find((tag)=>tag.name === part.trim()); if (existingTag) { parentTag = existingTag; } else { const newTagObj = { id: Date.now() + index, name: part.trim(), children: [] }; if (parentTag) { parentTag.children.push(newTagObj); } else { setTags((prevTags)=>[ ...prevTags, newTagObj ]); } parentTag = newTagObj; } }); setNewTag(""); }; const handleAddBookmark = (e)=>{ e.preventDefault(); const newBookmarkObj = { ...newBookmark, id: Date.now() }; setBookmarks([ ...bookmarks, newBookmarkObj ]); setNewBookmark({ title: "", url: "", tags: [] }); }; const handleTagClick = (tag)=>{ setSelectedTag(tag); }; const handleBookmarkInputChange = (e)=>{ setNewBookmark({ ...newBookmark, [e.target.name]: e.target.value }); }; const handleTagCheckboxChange = (e)=>{ const { value, checked } = e.target; setNewBookmark((prev)=>({ ...prev, tags: checked ? [ ...prev.tags, value ] : prev.tags.filter((tag)=>tag !== value) })); }; const handleTagEdit = (id, newTagName)=>{ setTags(tags.map((tag)=>tag.id === id ? { ...tag, name: newTagName } : tag)); }; const handleTagDelete = (id)=>{ setTags(tags.filter((tag)=>tag.id !== id)); }; const handleDragStart = (e, id)=>{ e.dataTransfer.setData("tagId", id); }; const handleDrop = (e, parentId)=>{ const id = e.dataTransfer.getData("tagId"); const tag = tags.find((t)=>t.id === Number(id)); const newTags = tags.filter((t)=>t.id !== Number(id)); const parent = tags.find((t)=>t.id === parentId); if (parent) parent.children.push(tag); setTags([ ...newTags, parent ]); }; const handleDropOnTag = (e, dropTag)=>{ const id = e.dataTransfer.getData("tagId"); const tag = tags.find((t)=>t.id === Number(id)); const newTags = tags.filter((t)=>t.id !== Number(id)); if (dropTag) dropTag.children.push(tag); setTags([ ...newTags, dropTag ]); }; const addChildTag = (parentId)=>{ const childTagName = prompt("Enter child tag name", ""); if (childTagName) { const newTag = { id: Date.now(), name: childTagName, children: [] }; setTags((tags)=>tags.map((tag)=>{ if (tag.id === parentId) { return { ...tag, children: [ ...tag.children, newTag ] }; } return tag; })); } }; const renderTags = (tagTree)=>{ return tagTree.map((tag)=>/*#__PURE__*/ React.createElement("div", { key: tag.id, className: "pl-4", draggable: true, onDragStart: (e)=>handleDragStart(e, tag.id), onDrop: (e)=>handleDropOnTag(e, tag), onDragOver: (e)=>e.preventDefault(), __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-semibold cursor-pointer flex justify-between items-center", onClick: ()=>handleTagClick(tag), onDrop: (e)=>handleDrop(e, tag.id), onDragOver: (e)=>e.preventDefault(), __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, tag.name), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTagEdit(tag.id, prompt("Edit tag name", tag.name)), className: "text-blue-500 mr-2", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-edit", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTagDelete(tag.id), className: "text-red-500 mr-2", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-trash", __source: { fileName: "", lineNumber: 111, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>addChildTag(tag.id), className: "text-green-500", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-plus", __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this })))), renderTags(tag.children))); }; const selectedBookmarks = selectedTag ? bookmarks.filter((b)=>b.tags.includes(selectedTag.name)) : []; const filteredBookmarks = selectedBookmarks.filter((b)=>b.title.toLowerCase().includes(searchTerm.toLowerCase())); return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 127, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[300px] bg-white p-6 overflow-y-auto", __source: { fileName: "", lineNumber: 128, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, "Tags"), /*#__PURE__*/ React.createElement("div", { className: "mt-4", onDrop: (e)=>handleDrop(e, null), onDragOver: (e)=>e.preventDefault(), __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, renderTags(tags)), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex", __source: { fileName: "", lineNumber: 134, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "newTag", value: newTag, onChange: (e)=>setNewTag(e.target.value), placeholder: "Add new tag", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mr-2", __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleAddTag, className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, "Add")))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-6 overflow-y-auto", __source: { fileName: "", lineNumber: 152, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6", __source: { fileName: "", lineNumber: 153, columnNumber: 9 }, __self: this }, "Bookmark App"), selectedTag && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 155, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 156, columnNumber: 13 }, __self: this }, "Bookmarks under ", selectedTag.name), /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), placeholder: "Search bookmarks", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-4", __source: { fileName: "", lineNumber: 157, columnNumber: 13 }, __self: this }), filteredBookmarks.map((bookmark)=>/*#__PURE__*/ React.createElement("div", { key: bookmark.id, className: "mb-4 p-4 border border-gray-200 rounded-lg", __source: { fileName: "", lineNumber: 166, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: bookmark.url, className: "text-blue-500", __source: { fileName: "", lineNumber: 167, columnNumber: 17 }, __self: this }, bookmark.title)))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow w-full max-w-md", __source: { fileName: "", lineNumber: 172, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleAddBookmark, __source: { fileName: "", lineNumber: 173, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "bookmarkTitle", __source: { fileName: "", lineNumber: 175, columnNumber: 15 }, __self: this }, "Bookmark Title"), /*#__PURE__*/ React.createElement("input", { id: "bookmarkTitle", name: "title", value: newBookmark.title, onChange: handleBookmarkInputChange, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700", type: "text", placeholder: "Enter bookmark title", __source: { fileName: "", lineNumber: 176, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 186, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "bookmarkURL", __source: { fileName: "", lineNumber: 187, columnNumber: 15 }, __self: this }, "Bookmark URL"), /*#__PURE__*/ React.createElement("input", { id: "bookmarkURL", name: "url", value: newBookmark.url, onChange: handleBookmarkInputChange, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700", type: "url", placeholder: "Enter bookmark URL", __source: { fileName: "", lineNumber: 188, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 198, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 199, columnNumber: 15 }, __self: this }, "Tags"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap", __source: { fileName: "", lineNumber: 200, columnNumber: 15 }, __self: this }, tags.map((tag)=>/*#__PURE__*/ React.createElement("div", { key: tag.id, className: "mr-2 mb-2", __source: { fileName: "", lineNumber: 202, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { id: `tag-${tag.name}`, name: "tags", type: "checkbox", value: tag.name, checked: newBookmark.tags.includes(tag.name), onChange: handleTagCheckboxChange, className: "hidden peer", __source: { fileName: "", lineNumber: 203, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: `tag-${tag.name}`, className: "px-2 py-1 bg-gray-200 rounded-full cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white", __source: { fileName: "", lineNumber: 212, columnNumber: 21 }, __self: this }, tag.name))))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 222, columnNumber: 13 }, __self: this }, "Add Bookmark"))))); }