function MainComponent() { const [offers, setOffers] = React.useState([]); const [newOffer, setNewOffer] = React.useState(''); const [memberName, setMemberName] = React.useState(''); const handleNewOfferChange = (event)=>{ setNewOffer(event.target.value); }; const handleMemberNameChange = (event)=>{ setMemberName(event.target.value); }; const submitOffer = (event)=>{ event.preventDefault(); setOffers([ ...offers, { memberName, offerDetail: newOffer } ]); setNewOffer(''); setMemberName(''); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f7fafc] p-4 flex flex-col items-center", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl text-[#121212] mb-6", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, "Member Special Offers"), /*#__PURE__*/ React.createElement("form", { onSubmit: submitOffer, className: "w-full max-w-[400px] flex flex-col gap-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "p-2 border border-gray-200 rounded", type: "text", placeholder: "Member Name", name: "memberName", value: memberName, onChange: handleMemberNameChange, required: true, __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { className: "p-2 border border-gray-200 rounded", rows: "4", placeholder: "Offer Details", name: "offerDetails", value: newOffer, onChange: handleNewOfferChange, required: true, __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-[#1a202c] text-white font-bold rounded", type: "submit", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "Add Offer")), /*#__PURE__*/ React.createElement("div", { className: "mt-6 w-full max-w-[600px]", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, offers.map((offer, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4 p-4 border border-gray-200 rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, offer.memberName), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-md text-[#121212] mt-2", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, offer.offerDetail)))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, ` `)); }