Credit Card

1"use client";
2 
3import {
4  motion,
5  useMotionValue,
6  useReducedMotion,
7  useSpring,
8  useTransform,
9} from "framer-motion";
10import { CreditCard as CreditCardIcon } from "lucide-react";
11import { useMemo, useState } from "react";
12 
13interface CreditCardBaseUIProps {
14  cardNumber?: string;
15  cardholderName?: string;
16  expiryDate?: string;
17  cvv?: string;
18}
19 
20const gradients = {
21  front:
22    "linear-gradient(145deg, hsl(var(--primary) / 0.45), hsl(var(--primary) / 0.18))",
23  back: "linear-gradient(145deg, hsl(var(--primary) / 0.45), hsl(var(--primary) / 0.18))",
24};
25 
26const overlayLights = [
27  "radial-gradient(circle at 20% 30%, hsl(var(--foreground) / 0.12), transparent 55%)",
28  "radial-gradient(circle at 80% 20%, hsl(var(--primary) / 0.22), transparent 60%)",
29  "radial-gradient(circle at 50% 80%, hsl(var(--accent) / 0.28), transparent 65%)",
30];
31 
32export function CreditCardBaseUI({
33  cardNumber = "4532 1234 5678 9010",
34  cardholderName = "JORDAN PARK",
35  expiryDate = "09/27",
36  cvv = "123",
37}: CreditCardBaseUIProps) {
38  const [isFlipped, setIsFlipped] = useState(false);
39 
40  const x = useMotionValue(0);
41  const y = useMotionValue(0);
42 
43  const rotateX = useSpring(useTransform(y, [-0.5, 0.5], [6, -6]), {
44    stiffness: 280,
45    damping: 28,
46  });
47  const rotateY = useSpring(useTransform(x, [-0.5, 0.5], [-6, 6]), {
48    stiffness: 280,
49    damping: 28,
50  });
51 
52  const shouldReduceMotion = useReducedMotion();
53 
54  const overlayGradient = useMemo(() => overlayLights.join(","), []);
55 
56  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
57    if (shouldReduceMotion) return;
58    const rect = event.currentTarget.getBoundingClientRect();
59    const width = rect.width;
60    const height = rect.height;
61    const mouseX = event.clientX - rect.left;
62    const mouseY = event.clientY - rect.top;
63    const xPct = mouseX / width - 0.5;
64    const yPct = mouseY / height - 0.5;
65    x.set(xPct);
66    y.set(yPct);
67  };
68 
69  const handleMouseLeave = () => {
70    x.set(0);
71    y.set(0);
72  };
73 
74  const formatCardNumber = (number: string) => {
75    return number.replace(/(.{4})/g, "$1 ").trim();
76  };
77 
78  return (
79    <div className="flex items-center justify-center p-8 perspective-1000">
80      <motion.div
81        onMouseMove={handleMouseMove}
82        onMouseLeave={handleMouseLeave}
83        onClick={() => setIsFlipped(!isFlipped)}
84        className="relative h-[240px] w-[380px] cursor-pointer"
85        style={{
86          rotateX,
87          rotateY,
88          transformStyle: "preserve-3d",
89// … truncated