function MainComponent() { const [rsvpInfo, setRsvpInfo] = React.useState({ name: '', attend: '', guests: '0' }); const [isModalOpen, setModalOpen] = React.useState(false); const [buttonClicked, setButtonClicked] = React.useState(false); const handleChange = (event)=>{ const { name, value } = event.target; setRsvpInfo((prevInfo)=>({ ...prevInfo, [name]: value })); }; const handleSubmit = (event)=>{ event.preventDefault(); console.log(rsvpInfo); setModalOpen(false); }; const handleRSVPClick = ()=>{ setModalOpen(true); setButtonClicked(true); }; const modalCN = isModalOpen ? "fixed inset-0 bg-[#00000080] flex justify-center items-center p-4" : "hidden"; const buttonCN = `py-2 px-4 bg-[#FF9AA2] text-white rounded font-bold font-roboto ${buttonClicked ? "animate-click" : ""}`; React.useEffect(()=>{ if (buttonClicked) { const timer = setTimeout(()=>{ setButtonClicked(false); }, 1000); return ()=>clearTimeout(timer); } }, [ buttonClicked ]); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FFE5D9] flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-4xl font-bold font-lobster mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Mary & Gustav's Wedding"), /*#__PURE__*/ React.createElement("h2", { className: "text-center text-xl font-roboto mb-6", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Please RSVP by April 30th, 2023"), /*#__PURE__*/ React.createElement("button", { onClick: handleRSVPClick, className: buttonCN, __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "RSVP Here"))), /*#__PURE__*/ React.createElement("div", { className: modalCN, __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6 max-w-md w-full", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-md font-roboto mb-1", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, "Full Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", id: "name", className: "bg-[#FFF0EB] w-full border border-[#FFDAC1] rounded py-2 px-4 font-roboto", onChange: handleChange, value: rsvpInfo.name, required: true, __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-md font-roboto mb-1", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, "Will you attend?"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "attend", id: "yes", className: "mr-2", onChange: handleChange, value: "Yes", required: true, __source: { fileName: "", lineNumber: 83, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "yes", className: "font-roboto", __source: { fileName: "", lineNumber: 92, columnNumber: 19 }, __self: this }, "Yes")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "attend", id: "no", className: "mr-2", onChange: handleChange, value: "No", __source: { fileName: "", lineNumber: 95, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "no", className: "font-roboto", __source: { fileName: "", lineNumber: 103, columnNumber: 19 }, __self: this }, "No")))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "guests", className: "block text-md font-roboto mb-1", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, "Number of Guests"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "guests", id: "guests", className: "bg-[#FFF0EB] w-full border border-[#FFDAC1] rounded py-2 px-4 font-roboto", onChange: handleChange, value: rsvpInfo.guests, min: "0", __source: { fileName: "", lineNumber: 112, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#FF9AA2] text-white py-3 rounded font-bold font-roboto", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, "Submit RSVP")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 133, columnNumber: 7 }, __self: this }, ` @keyframes buttonClickAnimation { 0% { transform: scale(1); } 50% { transform: scale(0.95); } 100% { transform: scale(1); } } .animate-click { animation: buttonClickAnimation 1s ease; } `)); }