function MainComponent() { const [posts, setPosts] = React.useState([]); const [isSubmitting, setIsSubmitting] = React.useState(false); const handleSubmit = (event)=>{ event.preventDefault(); setIsSubmitting(true); setTimeout(()=>{ const formData = new FormData(event.target); const newPost = { title: formData.get('title'), content: formData.get('content'), id: Date.now() }; setPosts([ newPost, ...posts ]); setIsSubmitting(false); event.target.reset(); }, 1000); }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto text-center my-6 text-gradient", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "BlogSpace Articles"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-8", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "title", className: "block text-lg font-roboto text-[#6f42c1] mb-2", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "Title:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "title", name: "title", required: true, className: "w-full p-2 border border-[#6f42c1] rounded bg-[#f6f8fa]", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "content", className: "block text-lg font-roboto text-[#6f42c1] mb-2", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "Content:"), /*#__PURE__*/ React.createElement("textarea", { id: "content", name: "content", rows: "4", required: true, className: "w-full p-2 border border-[#6f42c1] rounded bg-[#f6f8fa]", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-[#34d399] text-white rounded hover:bg-[#059669]", disabled: isSubmitting, __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, isSubmitting ? 'Posting...' : 'Publish')), /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, posts.map((post)=>/*#__PURE__*/ React.createElement("article", { key: post.id, className: "p-4 border border-[#6f42c1] rounded bg-[#ecedf9] transform hover:scale-105 transition duration-500", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto text-[#6f42c1] mb-2", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, post.title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#343a40]", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, post.content))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, ` .text-gradient { background-image: linear-gradient(to right, #6f42c1, #e53e3e, #f6ad55, #48bb78); -webkit-background-clip: text; color: transparent; animation: slidebg 5s linear infinite forwards; } @keyframes slidebg { to { background-position: 200% center; } } h1, h2, p { transition: transform 0.2s ease-in-out; } h1:hover, h2:hover, p:hover { transform: translateX(10px); } `)); }