Billing Screen

1"use client";
2 
3import type React from "react";
4import { Button } from "@/components/ui/button";
5import { InfoIcon } from "lucide-react";
6import { cn } from "@/lib/utils";
7import { motion, useMotionValue, useSpring, useTransform } from "motion/react";
8import { useRef } from "react";
9 
10// Internal CreditCard component (not exported)
11function CreditCard({
12  balance,
13  username,
14  className,
15}: {
16  balance: string;
17  username: string;
18  className?: string;
19}) {
20  const cardRef = useRef<HTMLDivElement>(null);
21  const mouseX = useMotionValue(0);
22  const mouseY = useMotionValue(0);
23 
24  const rotateX = useSpring(useTransform(mouseY, [-0.5, 0.5], [5, -5]), {
25    stiffness: 300,
26    damping: 30,
27  });
28  const rotateY = useSpring(useTransform(mouseX, [-0.5, 0.5], [-5, 5]), {
29    stiffness: 300,
30    damping: 30,
31  });
32 
33  const shineX = useSpring(useTransform(mouseX, [-0.5, 0.5], [0, 100]), {
34    stiffness: 200,
35    damping: 25,
36  });
37 
38  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
39    if (!cardRef.current) return;
40    const rect = cardRef.current.getBoundingClientRect();
41    const centerX = rect.left + rect.width / 2;
42    const centerY = rect.top + rect.height / 2;
43    const x = (e.clientX - centerX) / (rect.width / 2);
44    const y = (e.clientY - centerY) / (rect.height / 2);
45    mouseX.set(x);
46    mouseY.set(y);
47  };
48 
49  const handleMouseLeave = () => {
50    mouseX.set(0);
51    mouseY.set(0);
52  };
53 
54  return (
55    <div
56      className={cn("relative mx-auto w-full max-w-md font-sans", className)}
57    >
58      <motion.div
59        ref={cardRef}
60        onMouseMove={handleMouseMove}
61        onMouseLeave={handleMouseLeave}
62        className="group relative w-full overflow-hidden bg-zinc-950 p-6 shadow-xl ring ring-black/10 dark:bg-zinc-900"
63        style={{
64          aspectRatio: "190/123",
65          alignSelf: "stretch",
66          borderRadius: "12px",
67          rotateX,
68          rotateY,
69          transformPerspective: 1000,
70          scale: 1,
71          transition: "box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
72          boxShadow:
73            "0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -2px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.2)",
74        }}
75        whileHover={{
76          scale: 1.02,
77          boxShadow:
78            "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.3)",
79        }}
80      >
81// … truncated