function MainComponent() { const [numCards, setNumCards] = React.useState(0); const [cards, setCards] = React.useState([]); const [cardDetails, setCardDetails] = React.useState([]); const handleNumCardsChange = (e)=>{ const value = e.target.value; setNumCards(value); setCards(Array.from({ length: value }, (_, i)=>i)); }; const handleCardDetailChange = (e, index, field)=>{ const newCardDetails = [ ...cardDetails ]; if (!newCardDetails[index]) { newCardDetails[index] = { cardNumber: '', expirationDate: '', cvvCode: '' }; } newCardDetails[index][field] = e.target.value; setCardDetails(newCardDetails); }; const scanCards = ()=>{ console.log(cardDetails); }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-[#f9f9f9] min-h-screen flex flex-col items-center", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, "Card Scanner"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-sm bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "numCards", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Enter the number of cards to scan"), /*#__PURE__*/ React.createElement("input", { name: "numCards", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "numCards", type: "number", placeholder: "Number of cards", value: numCards, onChange: handleNumCardsChange, __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", id: "cardDetailsContainer", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, cards.map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "cardDetail", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: `cardNumber-${index}`, __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, "Card Number"), /*#__PURE__*/ React.createElement("input", { name: `cardNumber-${index}`, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: `cardNumber-${index}`, type: "text", placeholder: "Card Number", value: cardDetails[index]?.cardNumber || '', onChange: (e)=>handleCardDetailChange(e, index, 'cardNumber'), __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 mt-2", htmlFor: `expirationDate-${index}`, __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, "Expiration Date"), /*#__PURE__*/ React.createElement("input", { name: `expirationDate-${index}`, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: `expirationDate-${index}`, type: "text", placeholder: "MM/YY", value: cardDetails[index]?.expirationDate || '', onChange: (e)=>handleCardDetailChange(e, index, 'expirationDate'), __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 mt-2", htmlFor: `cvvCode-${index}`, __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, "CVV Code"), /*#__PURE__*/ React.createElement("input", { name: `cvvCode-${index}`, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: `cvvCode-${index}`, type: "text", placeholder: "CVV", value: cardDetails[index]?.cvvCode || '', onChange: (e)=>handleCardDetailChange(e, index, 'cvvCode'), __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { className: "mt-4 w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "button", onClick: scanCards, __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, "Scan Cards"))); }