function MainComponent() { const [articles, setArticles] = React.useState([]); React.useEffect(()=>{ // Placeholder for fetching initial articles. This part would typically involve fetching data from a local environment or an API. const initialArticles = Array.from({ length: 10 }, (_, index)=>({ id: index, title: `Article ${index + 1}`, summary: `Summary of article ${index + 1}.` })); setArticles(initialArticles); }, []); const handleSubmit = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const newArticle = { id: articles.length, title: formData.get('title'), summary: formData.get('summary') }; setArticles([ ...articles, newArticle ]); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f2f5]", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-white shadow p-4", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex justify-around", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#main", className: "text-[#0077b6] font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#about", className: "text-[#0077b6] font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, "About")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#contact", className: "text-[#0077b6] font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, "Contact")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#works", className: "text-[#0077b6] font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, "Works")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#activities", className: "text-[#0077b6] font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, "Activities")))), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { id: "main", className: "min-h-screen flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl text-[#0077b6] font-roboto mb-8", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "Welcome to My Homepage!"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, articles.slice(0, 20).map((article)=>/*#__PURE__*/ React.createElement("article", { key: article.id, className: "bg-white shadow p-4", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-[#0077b6] font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, article.title), /*#__PURE__*/ React.createElement("p", { className: "text-[#0077b6] font-roboto", __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, article.summary)))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mt-8 space-y-4", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "title", className: "border p-2 w-full", placeholder: "Title", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "summary", className: "border p-2 w-full", placeholder: "Summary", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#0077b6] text-white font-roboto p-2", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Submit"))), /*#__PURE__*/ React.createElement("section", { id: "about", className: "min-h-screen flex items-center justify-center bg-white", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#0077b6] font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "About Me")), /*#__PURE__*/ React.createElement("section", { id: "contact", className: "min-h-screen flex items-center justify-center bg-[#f0f2f5]", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl text-[#0077b6] font-roboto", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Contact"), /*#__PURE__*/ React.createElement("p", { className: "text-[#0077b6] font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "You can reach me via email at ", /*#__PURE__*/ React.createElement("a", { href: "mailto:example@example.com", className: "underline", __source: { fileName: "", lineNumber: 59, columnNumber: 85 }, __self: this }, "example@example.com")))), /*#__PURE__*/ React.createElement("section", { id: "works", className: "min-h-screen flex items-center justify-center bg-white", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#0077b6] font-roboto", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "My Works")), /*#__PURE__*/ React.createElement("section", { id: "activities", className: "min-h-screen flex items-center justify-center bg-[#f0f2f5]", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#0077b6] font-roboto", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "Activities")))); }