function MainComponent() { const [code, setCode] = React.useState(''); const [verificationStatus, setVerificationStatus] = React.useState(null); const handleCodeChange = (event)=>{ setCode(event.target.value); }; const handleSubmit = (event)=>{ event.preventDefault(); const verifiedCodes = [ "12345", "67890", "24680" ]; if (verifiedCodes.includes(code.trim())) { setVerificationStatus(true); } else { setVerificationStatus(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#F0F4EF] min-h-screen flex flex-col justify-center items-center", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#345D36] text-4xl font-semibold mb-8", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Fertilizer Verification"), /*#__PURE__*/ React.createElement("div", { className: `bg-white shadow-md rounded-lg p-8 ${verificationStatus === false ? 'animate-shake' : ''}`, __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#345D36] text-2xl font-semibold mb-6", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Enter your product code"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "productCode", placeholder: "Product Code", className: "border border-[#D9D9D9] rounded-md p-2 w-full mb-4", value: code, onChange: handleCodeChange, __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#345D36] text-white rounded-md p-2 w-full", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "Verify")), verificationStatus !== null && /*#__PURE__*/ React.createElement("div", { className: `mt-4 p-2 text-center rounded-md ${verificationStatus ? 'bg-green-200 text-green-700' : 'bg-red-200 text-red-700'}`, __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, verificationStatus ? "Verification successful! 🎉" : "Verification failed. Please check your code."))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, ` @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } } .animate-shake { animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; } `)); }