function MainComponent() { const [paymentLink, setPaymentLink] = React.useState(''); const [qrCodeVisible, setQRCodeVisible] = React.useState(false); const [loading, setLoading] = React.useState(false); const [formData, setFormData] = React.useState({ eventName: '', eventDate: '', eventDescription: '', eventImage: null, ticketPrice: '' }); const handleChange = (e)=>{ if (e.target.name === 'event_image') { setFormData({ ...formData, [e.target.name]: e.target.files[0] }); } else { setFormData({ ...formData, [e.target.name]: e.target.value }); } }; const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); // proceed with API call to create event and generate Razorpay payment link // We consider it gets stored in `paymentLink` and there will be a qrCode for the event. setTimeout(()=>{ setPaymentLink('https://example-payment-link.com'); setQRCodeVisible(true); // Simulating QR code generation setLoading(false); }, 2000); }; const ticketPriceInput = /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "ticketPrice", className: "block mb-2", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, "Ticket Price"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "ticketPrice", name: "ticketPrice", className: "w-full p-2 border border-gray-300 rounded", placeholder: "Set ticket price", value: formData.ticketPrice, onChange: handleChange, __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this })); const generateQRCodeSection = qrCodeVisible && /*#__PURE__*/ React.createElement("section", { className: "mb-6", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, "Your Event QR Code"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded border border-gray-300", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[200px] h-[200px] bg-gray-300 flex items-center justify-center text-lg", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "QR Code")), /*#__PURE__*/ React.createElement("a", { href: paymentLink, className: "mt-4 inline-block bg-[#4caf50] text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Visit Payment Link"))); const submitButtonLabel = loading ? /*#__PURE__*/ React.createElement(React.Fragment, { __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner animate-spin", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, "Processing...")) : "Create & Share Link"; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f5f5f5] font-roboto", __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#121212] text-white p-4", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl sm:text-3xl", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "Eventify"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars sm:hidden", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-6", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "Create Your Event"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "eventName", className: "block mb-2", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, "Event Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "eventName", name: "eventName", className: "w-full p-2 border border-gray-300 rounded", placeholder: "Enter event name", value: formData.eventName, onChange: handleChange, __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "eventDate", className: "block mb-2", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, "Event Date & Time"), /*#__PURE__*/ React.createElement("input", { type: "datetime-local", id: "eventDate", name: "eventDate", className: "w-full p-2 border border-gray-300 rounded", value: formData.eventDate, onChange: handleChange, __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "eventDescription", className: "block mb-2", __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }, "Description"), /*#__PURE__*/ React.createElement("textarea", { id: "eventDescription", name: "eventDescription", className: "w-full p-2 border border-gray-300 rounded", rows: "4", placeholder: "Tell people more about the event", value: formData.eventDescription, onChange: handleChange, __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "eventImage", className: "block mb-2", __source: { fileName: "", lineNumber: 112, columnNumber: 15 }, __self: this }, "Upload Event Image"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "eventImage", name: "eventImage", className: "w-full text-sm text-gray-500 file:py-2 file:px-4 file:border-0 file:rounded file:bg-[#d1d5db] file:text-[#121212]", onChange: handleChange, __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this })), ticketPriceInput, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full sm:w-auto flex justify-center items-center px-6 py-2 bg-[#4caf50] text-white rounded disabled:opacity-50", disabled: loading, __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, submitButtonLabel))), generateQRCodeSection), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 128, columnNumber: 7 }, __self: this }, ` @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } `)); }