function MainComponent() { const [amount, setAmount] = React.useState(""); const [qrCodeUrl, setQrCodeUrl] = React.useState(""); const [bankDetails, setBankDetails] = React.useState({ accountName: "", accountNumber: "", bankName: "" }); const [showCalculator, setShowCalculator] = React.useState(false); const handleBankDetailChange = (e)=>{ const { name, value } = e.target; setBankDetails((prevDetails)=>({ ...prevDetails, [name]: value })); }; const handleAmountChange = (value)=>{ setAmount(value); }; const generateQrCode = ()=>{ if (amount) { const data = `Account Name: ${bankDetails.accountName}, Account Number: ${bankDetails.accountNumber}, Bank Name: ${bankDetails.bankName}, Amount: ${amount}`; const url = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(data)}&size=150x150`; setQrCodeUrl(url); } }; const handleSubmit = (e)=>{ e.preventDefault(); setShowCalculator(true); }; const createCalculatorButton = (symbol, onClick)=>/*#__PURE__*/ React.createElement("button", { onClick: onClick, className: "bg-gray-200 p-4 rounded font-bold text-xl w-[64px] h-[64px] m-1", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, symbol); const handleCalculatorInput = (input)=>{ if (input === "C") { setAmount(""); } else if (input === "=") { try { const result = eval(amount); setAmount(`${result}`); } catch { setAmount("Error"); } } else { setAmount((prev)=>prev + input); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, !showCalculator && /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-[400px] mb-4", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-bold font-roboto mb-2", htmlFor: "accountName", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "Account Name:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "accountName", name: "accountName", value: bankDetails.accountName, onChange: handleBankDetailChange, className: "border border-gray-300 p-2 rounded w-full", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-bold font-roboto mb-2", htmlFor: "accountNumber", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "Account Number:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "accountNumber", name: "accountNumber", value: bankDetails.accountNumber, onChange: handleBankDetailChange, className: "border border-gray-300 p-2 rounded w-full", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-bold font-roboto mb-2", htmlFor: "bankName", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "Bank Name:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "bankName", name: "bankName", value: bankDetails.bankName, onChange: handleBankDetailChange, className: "border border-gray-300 p-2 rounded w-full", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white py-2 px-4 rounded font-roboto hover:bg-blue-700", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, "Submit")), showCalculator && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px] mb-4", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-xl font-bold font-roboto mb-2", htmlFor: "amount", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, "Enter Amount:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "amount", name: "amount", value: amount, onChange: (e)=>handleAmountChange(e.target.value), className: "border border-gray-300 p-2 rounded w-full", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-2 mb-4", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, [ "7", "8", "9", "/" ].map((symbol)=>createCalculatorButton(symbol, ()=>handleCalculatorInput(symbol))), [ "4", "5", "6", "*" ].map((symbol)=>createCalculatorButton(symbol, ()=>handleCalculatorInput(symbol))), [ "1", "2", "3", "-" ].map((symbol)=>createCalculatorButton(symbol, ()=>handleCalculatorInput(symbol))), [ "0", ".", "C", "+" ].map((symbol)=>createCalculatorButton(symbol, ()=>handleCalculatorInput(symbol))), [ "=" ].map((symbol)=>createCalculatorButton(symbol, ()=>handleCalculatorInput(symbol)))), /*#__PURE__*/ React.createElement("button", { onClick: generateQrCode, className: "bg-blue-500 text-white py-2 px-4 rounded font-roboto hover:bg-blue-700", __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, "Generate QR Code"), qrCodeUrl && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: qrCodeUrl, alt: `QR Code for payment with amount ${amount}`, className: "w-[150px] h-[150px]", __source: { fileName: "", lineNumber: 138, columnNumber: 15 }, __self: this })))); }