function MainComponent() { const [folders, setFolders] = React.useState({}); const [newFolderName, setNewFolderName] = React.useState(""); const [feedUrl, setFeedUrl] = React.useState(""); const [selectedFolder, setSelectedFolder] = React.useState(""); const [displayedFeeds, setDisplayedFeeds] = React.useState([]); const addFolder = (e)=>{ e.preventDefault(); if (newFolderName && !(newFolderName in folders)) { setFolders({ ...folders, [newFolderName]: [] }); setNewFolderName(''); } }; const addFeed = (e)=>{ e.preventDefault(); if (feedUrl && selectedFolder) { const updatedFolders = { ...folders, [selectedFolder]: [ ...folders[selectedFolder], feedUrl ] }; setFolders(updatedFolders); setFeedUrl(''); } }; const onSelectFolder = (folderName)=>{ setSelectedFolder(folderName); setDisplayedFeeds(folders[folderName]); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:w-1/3 p-2", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Folders"), /*#__PURE__*/ React.createElement("form", { onSubmit: addFolder, className: "flex mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "folderName", value: newFolderName, onChange: (e)=>setNewFolderName(e.target.value), className: "border p-2 mr-2 flex-grow", placeholder: "New folder name", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "border p-2 bg-[#1E90FF] text-white", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "Add")), /*#__PURE__*/ React.createElement("ul", { className: "list-none", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, Object.keys(folders).map((folderName)=>/*#__PURE__*/ React.createElement("li", { key: folderName, className: "border-b last:border-b-0 p-2", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>onSelectFolder(folderName), className: `w-full text-left ${selectedFolder === folderName ? "bg-[#D3D3D3]" : ""}`, __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, folderName))))), /*#__PURE__*/ React.createElement("div", { className: "md:w-2/3 p-2", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: addFeed, className: "flex mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "url", name: "feedUrl", value: feedUrl, onChange: (e)=>setFeedUrl(e.target.value), className: "border p-2 mr-2 flex-grow", placeholder: "RSS feed URL", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "border p-2 bg-[#1E90FF] text-white", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "Add Feed")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "Feeds in '", selectedFolder, "'"), /*#__PURE__*/ React.createElement("ul", { className: "list-none", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, displayedFeeds.map((feed, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "border-b last:border-b-0 p-2", __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, feed))))))); }

Folders

Feeds in ''

Folders

Feeds in ''