\n \n {/* Front of Card */}\n

\n {/* Card Background Pattern */}\n

\n \n {/* Chip */}\n

\n\n {/* Card Type Logo */}\n

\n {cardData?.type.toUpperCase() || 'CARD'}\n

\n\n {/* Card Number */}\n

\n {isGenerating ? (\n

\n {[...Array(4)].map((_, i) => (\n

\n {[...Array(4)].map((_, j) => (\n

\n ))}\n

\n ) : cardData ? (\n formatCardNumber(cardData.number)\n ) : (\n '•••• •••• •••• ••••'\n )}\n

\n\n {/* Cardholder Name and Expiry */}\n

\n Cardholder Name\n

\n {isGenerating ? (\n

\n ) : cardData ? (\n cardData.holderName\n ) : (\n 'CARD HOLDER'\n )}\n

\n Expires\n

\n {isGenerating ? (\n

\n ) : cardData ? (\n `${cardData.expiryMonth}/${cardData.expiryYear.slice(-2)}`\n ) : (\n 'MM/YY'\n )}\n

\n\n {/* Holographic Effect */}\n

\n\n {/* Back of Card */}\n

\n {/* Magnetic Stripe */}\n

\n \n {/* CVV Area */}\n

\n \n {cardData?.cvv || '•••'}\n \n

CVV

\n\n {/* Terms Text */}\n

\n This card is property of the bank. If found, please return to any branch.\n Unauthorized use is prohibited and punishable by law.\n

\n\n {/* Flip Button */}\n

\n setIsFlipped(!isFlipped)}\n className=\"btn-icy rounded-lg py-2 px-6 text-sm font-medium transition-all duration-300 hover:scale-105 flex items-center justify-center mx-auto\"\n disabled={isGenerating}\n >\n \n {isFlipped ? 'Show Front' : 'Show Back'}\n \n

\n\n \n \n );\n}","deleted","label",[168,169,151],"frontend","components","permalink","https://www.val.town/x/hmv0011/cc-utils/code/frontend/components/Card3D.tsx","extension","actionData","errors"]