function RoleSwitchButton({ isAdmin, toggleRole }) { return /*#__PURE__*/ React.createElement("button", { onClick: toggleRole, className: "bg-blue-500 text-white p-2 rounded hover:bg-blue-700 transition duration-200", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, isAdmin ? "Switch to Viewer" : "Switch to Admin"); } function RoleSwitchButtonStory() { const [isAdmin, setIsAdmin] = React.useState(false); const toggleRole = ()=>setIsAdmin(!isAdmin); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RoleSwitchButton, { isAdmin: isAdmin, toggleRole: toggleRole, __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function MainComponent() { const [articles, setArticles] = React.useState([ { id: 1, title: "Breaking News: AI Revolutionizes Tech Industry", content: "In an unprecedented leap, AI technologies are now at the forefront of innovation..." }, { id: 2, title: "Global Warming: A Call to Action", content: "As the planet continues to warm, scientists urge for immediate measures to counteract climate change..." }, { id: 3, title: "Space Exploration: Mars Mission 2025", content: "The race to Mars is on, with several nations and private companies vying for the first successful landing..." } ]); const [isAdmin, setIsAdmin] = React.useState(false); const [newTitle, setNewTitle] = React.useState(''); const [newContent, setNewContent] = React.useState(''); const addArticle = (event)=>{ event.preventDefault(); const newArticle = { id: articles.length + 1, title: newTitle, content: newContent }; setArticles([ ...articles, newArticle ]); setNewTitle(''); setNewContent(''); }; const toggleRole = ()=>{ setIsAdmin(!isAdmin); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center bg-gray-100 p-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "Latest News Articles"), /*#__PURE__*/ React.createElement(RoleSwitchButton, { isAdmin: isAdmin, toggleRole: toggleRole, __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this })), isAdmin && /*#__PURE__*/ React.createElement("form", { onSubmit: addArticle, className: "max-w-4xl mx-auto my-8", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 my-2 border rounded", type: "text", placeholder: "Title", value: newTitle, onChange: (e)=>setNewTitle(e.target.value), name: "title", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-2 my-2 border rounded", placeholder: "Content", value: newContent, onChange: (e)=>setNewContent(e.target.value), name: "content", rows: "4", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-200", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Add Article")), /*#__PURE__*/ React.createElement("div", { className: "mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, articles.map((article)=>/*#__PURE__*/ React.createElement("article", { key: article.id, className: "my-10 p-6 max-w-4xl mx-auto bg-[#f0f0f5] rounded-lg shadow-md", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-2", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, article.title), /*#__PURE__*/ React.createElement("p", { className: "text-md", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, article.content))))); }