function MainComponent() { const [tags, setTags] = React.useState({ "Welcome to MailApp": [ "New User" ], "Monthly Newsletter": [ "Newsletter" ] }); const [users, setUsers] = React.useState({ "John Doe": [], "Jane Smith": [] }); const [newTag, setNewTag] = React.useState(''); const [selectedUser, setSelectedUser] = React.useState(''); const addTag = ()=>{ if (newTag && !Object.keys(tags).includes(newTag)) { const updatedTags = { ...tags, [newTag]: [] }; setTags(updatedTags); setNewTag(''); } }; const addUserTag = ()=>{ if (newTag && selectedUser && !users[selectedUser].includes(newTag)) { const updatedUsers = { ...users, [selectedUser]: users[selectedUser] ? [ ...users[selectedUser], newTag ] : [ newTag ] }; setUsers(updatedUsers); setNewTag(''); setSelectedUser(''); } }; const userOptions = Object.keys(users); const tagList = Object.keys(tags); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f1f3f4] p-8", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center p-4 bg-white shadow-md mb-6", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-3xl", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "📧"), /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-xl text-gray-800", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "MailApp"))), /*#__PURE__*/ React.createElement("main", { className: "flex", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-1/5 p-4 bg-white shadow-md", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "font-roboto text-gray-800 py-2 cursor-pointer hover:bg-gray-100", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "Inbox"), /*#__PURE__*/ React.createElement("li", { className: "font-roboto text-gray-800 py-2 cursor-pointer hover:bg-gray-100", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Sent"), /*#__PURE__*/ React.createElement("li", { className: "font-roboto text-gray-800 py-2 cursor-pointer hover:bg-gray-100", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Drafts"), /*#__PURE__*/ React.createElement("li", { className: "font-roboto text-gray-800 py-2 cursor-pointer hover:bg-gray-100 hover:text-blue-500", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "Tags"))), /*#__PURE__*/ React.createElement("section", { className: "flex-1 p-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 shadow-md mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg text-gray-800 mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "Add New Tag"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "newTag", placeholder: "Add new tag", value: newTag, onChange: (e)=>setNewTag(e.target.value), className: "p-2 border-2 border-gray-300", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: addTag, className: "ml-2 px-4 py-2 bg-green-500 text-white", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, "Add Tag")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg text-gray-800 mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "Existing Tags"), tagList.map((tag, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "px-3 py-1 m-1 bg-blue-100 text-blue-800 text-xs font-semibold rounded-full", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, tag))), /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg text-gray-800 mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "Tag Users"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "selectedUser", className: "p-2 border-2 border-gray-300 mr-2", value: selectedUser, onChange: (e)=>setSelectedUser(e.target.value), __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, "Select User"), userOptions.map((user, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: user, __source: { fileName: "", lineNumber: 72, columnNumber: 19 }, __self: this }, user))), /*#__PURE__*/ React.createElement("input", { type: "text", name: "newTagUser", placeholder: "Add new tag", value: newTag, onChange: (e)=>setNewTag(e.target.value), className: "p-2 border-2 border-gray-300", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: addUserTag, className: "ml-2 px-4 py-2 bg-green-500 text-white", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, "Add Tag")), userOptions.map((user, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-md text-gray-800", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }, user), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, users[user].map((tag, tagIndex)=>/*#__PURE__*/ React.createElement("span", { key: tagIndex, className: "px-3 py-1 m-1 bg-purple-100 text-purple-800 text-xs font-semibold rounded-full", __source: { fileName: "", lineNumber: 83, columnNumber: 21 }, __self: this }, tag))))))))); }