function MainComponent() { const [code, setCode] = React.useState(''); const [isCodeValid, setIsCodeValid] = React.useState(false); const [hasRedeemed, setHasRedeemed] = React.useState(false); const secretCode = "EDITABLE2023"; // replace with your actual secret code const handleSubmit = (event)=>{ event.preventDefault(); if (code === secretCode && !hasRedeemed) { setIsCodeValid(true); setHasRedeemed(true); } else { setIsCodeValid(false); } }; const codeInputStyle = !isCodeValid && code ? 'border-red-500' : 'border-gray-300'; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen bg-[#f7f7f7] font-roboto", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded p-6 max-w-sm w-full", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "🎁 Free Item Giveaway"), !isCodeValid && !hasRedeemed ? /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#121212] text-sm font-semibold mb-2", htmlFor: "code", __source: { fileName: "", lineNumber: 28, columnNumber: 19 }, __self: this }, "Enter Your Code"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "free-item-code", id: "code", autoComplete: "off", placeholder: "Enter your code", className: `shadow appearance-none border rounded w-full py-2 px-3 ${codeInputStyle} leading-tight focus:outline-none focus:shadow-outline`, value: code, onChange: (event)=>setCode(event.target.value), __source: { fileName: "", lineNumber: 31, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: hasRedeemed, className: `bg-[#1a73e8] hover:bg-[#166cd1] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline ${hasRedeemed ? 'opacity-50 cursor-not-allowed' : ''}`, __source: { fileName: "", lineNumber: 43, columnNumber: 19 }, __self: this }, "Redeem"))) : /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, hasRedeemed ? /*#__PURE__*/ React.createElement("p", { className: "text-[#121212] mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 19 }, __self: this }, "Congratulations! You've redeemed your free item.") : /*#__PURE__*/ React.createElement("p", { className: "text-red-500 mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 19 }, __self: this }, "Invalid code or already redeemed."), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCode(''), className: "bg-[#1a73e8] hover:bg-[#166cd1] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, "Try a New Code"))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, ` body { margin: 0; } `)); }