function MainComponent() { const [fullName, setFullName] = React.useState(''); const [email, setEmail] = React.useState(''); const [guests, setGuests] = React.useState(1); const [sent, setSent] = React.useState(false); const handleInputChange = (event)=>{ const { name, value } = event.target; if (name === 'fullName') setFullName(value); if (name === 'email') setEmail(value); if (name === 'guests') setGuests(Number(value)); }; const handleSubmit = (event)=>{ event.preventDefault(); setSent(true); }; const formContent = !sent && /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4 animate-fade-in", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "fullName", className: "block text-sm font-roboto text-gray-700", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Full Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "fullName", id: "fullName", value: fullName, onChange: handleInputChange, className: "mt-1 p-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", placeholder: "John Doe", required: true, __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-sm font-roboto text-gray-700", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "Your Email"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", id: "email", value: email, onChange: handleInputChange, className: "mt-1 p-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", placeholder: "you@example.com", required: true, __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "guests", className: "block text-sm font-roboto text-gray-700", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "Number of Guests"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "guests", id: "guests", min: "1", value: guests, onChange: handleInputChange, className: "mt-1 p-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "inline-flex items-center justify-center w-full rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-roboto text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-paper-plane mr-2", "aria-hidden": "true", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }), "Send Invitation")); const confirmationMessage = sent && /*#__PURE__*/ React.createElement("div", { className: "text-center p-4 mt-4 rounded-md bg-green-100 animate-slide-in", __source: { fileName: "", lineNumber: 76, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-green-800", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, "🎉 Invitation sent! We can't wait to see you and your guests at the park!")); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-green-200 p-4", __source: { fileName: "", lineNumber: 84, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white rounded-lg p-6 shadow-lg", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-semibold font-roboto text-gray-900", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, "Sports Day in the Park!"), /*#__PURE__*/ React.createElement("p", { className: "text-md font-light font-roboto text-gray-600 my-4", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, "Join us for a fun-filled day of sports and activities at Central Park. Remember to bring your sports gear and let's make some amazing memories together. Friends and family are all welcome!"), formContent, confirmationMessage), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate-fade-in { animation: fadeIn 1s ease-in-out; } @keyframes slideIn { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .animate-slide-in { animation: slideIn 0.5s ease-out; } `)); }