function MainComponent() { const [cardDetails, setCardDetails] = React.useState({ cardName: 'John Doe', cardNumber: '1234 5678 9012 3456', expDate: '12/25', cvv: '123', backgroundImageDescription: 'mickey mouse', fontColor: '#ffffff' }); const handleChange = (e)=>{ setCardDetails((prevDetails)=>({ ...prevDetails, [e.target.name]: e.target.value })); }; const cardType = cardDetails.cardNumber.substring(0, 1) === '4' ? 'Visa' : cardDetails.cardNumber.substring(0, 2) === '51' || cardDetails.cardNumber.substring(0, 2) === '52' || cardDetails.cardNumber.substring(0, 2) === '53' || cardDetails.cardNumber.substring(0, 2) === '54' || cardDetails.cardNumber.substring(0, 2) === '55' ? 'Mastercard' : 'Unknown'; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row items-center justify-center gap-4 p-5 h-screen md:items-center", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "w-full md:w-1/2 bg-gray-100 p-5 rounded-lg", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto font-semibold mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "Card Details"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "backgroundImageDescription", className: "block text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Background Image Description"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "backgroundImageDescription", name: "backgroundImageDescription", value: cardDetails.backgroundImageDescription, onChange: handleChange, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "fontColor", className: "block text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Font Color"), /*#__PURE__*/ React.createElement("input", { type: "color", id: "fontColor", name: "fontColor", value: cardDetails.fontColor, onChange: handleChange, className: "shadow appearance-none border-0 rounded w-full h-10 py-2 focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "cardName", className: "block text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Cardholder Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "cardName", name: "cardName", value: cardDetails.cardName, onChange: handleChange, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "cardNumber", className: "block text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Card Number"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "cardNumber", name: "cardNumber", value: cardDetails.cardNumber, onChange: handleChange, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "expDate", className: "block text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Expiration Date"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "expDate", name: "expDate", value: cardDetails.expDate, onChange: handleChange, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "cvv", className: "block text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "CVV"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "cvv", name: "cvv", value: cardDetails.cvv, onChange: handleChange, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[300px] md:w-[400px] h-[188px] md:h-[250px] rounded-lg flex flex-col justify-between p-4 shadow-lg relative transform hover:scale-105 hover:-rotate-6 transition duration-300 ease-in-out overflow-hidden", style: { color: cardDetails.fontColor, transform: "rotate(8deg)" }, __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, cardDetails.backgroundImageDescription && /*#__PURE__*/ React.createElement("img", { src: "card.png", alt: cardDetails.backgroundImageDescription, className: "absolute inset-0 w-full h-full object-cover rounded-lg", __source: { fileName: "", lineNumber: 55, columnNumber: 54 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "z-10", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${cardType === 'Visa' ? 'fa fa-cc-visa' : cardType === 'Mastercard' ? 'fa fa-cc-mastercard' : ''} text-2xl`, __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "z-10 flex justify-between items-center", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto font-bold", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, cardDetails.cardNumber.replace(/(\d{4})(?=\d)/g, '$1 '))), /*#__PURE__*/ React.createElement("div", { className: "z-10 flex justify-between text-sm", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, cardDetails.cardName), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, cardDetails.expDate))))); }