function MainComponent() { const [menuOpen, setMenuOpen] = React.useState(false); const [newsArticles, setNewsArticles] = React.useState([ { title: "Article One", content: "Content for article one..." }, { title: "Article Two", content: "Content for article two..." } ]); const currentYear = new Date().getFullYear(); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-t-4 border-[#333] px-6 py-2", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-xl font-roboto text-[#121212] cursor-pointer", onClick: ()=>setMenuOpen(!menuOpen), __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "☰ Menu"), menuOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute left-0 mt-2 py-2 w-[250px] bg-white shadow-xl", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block px-4 py-2 text-sm font-roboto text-[#121212] hover:bg-gray-100", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, "Edit Articles")))), /*#__PURE__*/ React.createElement("div", { className: "flex-grow container mx-auto px-4 pt-6", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, newsArticles.map((article, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white border border-gray-300 p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto text-[#333] mb-2", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, article.title), /*#__PURE__*/ React.createElement("p", { className: "text-base font-roboto text-[#666]", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, article.content))))), /*#__PURE__*/ React.createElement("div", { className: "border-b-4 border-[#333] px-6 py-2 text-center", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm font-roboto text-[#666]", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "© ", currentYear, " Your Website")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, ` @keyframes slideDown { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } `)); }