function MainComponent() { const [articles, setArticles] = React.useState([]); const [currentView, setCurrentView] = React.useState('share'); const handleSubmit = async (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const newArticle = { id: articles.length + 1, title: formData.get('articleTitle'), url: formData.get('articleUrl'), description: formData.get('description'), viewedUsers: [] }; setArticles([ ...articles, newArticle ]); setCurrentView('list'); }; const handleViewArticle = (articleId)=>{ const updatedArticles = articles.map((article)=>{ if (article.id === articleId) { return { ...article, viewedUsers: [ ...article.viewedUsers, `User ${article.viewedUsers.length + 1}` ] }; } return article; }); setArticles(updatedArticles); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F0F2F5] flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, currentView === 'share' && /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-md w-full max-w-[400px]", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Share an Article"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "articleTitle", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, "Title"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "articleTitle", id: "articleTitle", className: "mt-1 p-2 w-full border rounded-md", placeholder: "Interesting title...", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "articleUrl", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, "URL"), /*#__PURE__*/ React.createElement("input", { type: "url", name: "articleUrl", id: "articleUrl", className: "mt-1 p-2 w-full border rounded-md", placeholder: "https://example.com", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "description", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, "Description"), /*#__PURE__*/ React.createElement("textarea", { name: "description", id: "description", className: "mt-1 p-2 w-full border rounded-md", placeholder: "What's this article about?", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-blue-600 text-white rounded-md hover:bg-blue-700", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Share"))), currentView === 'list' && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px]", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentView('share'), className: "my-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "Share Another Article"), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Shared Articles"), articles.map((article)=>/*#__PURE__*/ React.createElement("div", { key: article.id, className: "bg-white p-4 rounded-lg shadow-md mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: article.url, target: "_blank", rel: "noopener noreferrer", className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, article.title), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, article.description), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleViewArticle(article.id), className: "mt-2 p-2 bg-green-500 text-white rounded hover:bg-green-600", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, "Mark as Viewed"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, article.viewedUsers.length > 0 && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, "Viewed by: ", article.viewedUsers.join(', '))))))); }