credit-card

1"use client";
2 
3import {
4  type ComponentProps,
5  createContext,
6  type HTMLAttributes,
7  type ReactNode,
8  useContext,
9  useEffect,
10  useState,
11} from "react";
12import { PaymentIcon } from "react-svg-credit-card-payment-icons";
13import { cn } from "@/lib/utils";
14 
15const useSupportsHover = () => {
16  const [supportsHover, setSupportsHover] = useState(false);
17 
18  useEffect(() => {
19    const mql = window.matchMedia("(hover: hover)");
20    const handler = (e: MediaQueryListEvent) => setSupportsHover(e.matches);
21 
22    setSupportsHover(mql.matches);
23    mql.addEventListener("change", handler);
24 
25    return () => mql.removeEventListener("change", handler);
26  }, []);
27 
28  return supportsHover;
29};
30 
31export type CreditCardProps = HTMLAttributes<HTMLDivElement>;
32 
33export const CreditCard = ({ className, ...props }: CreditCardProps) => (
34  <div
35    className={cn(
36      "group/kibo-credit-card perspective-distant aspect-[8560/5398] w-full max-w-96 text-white",
37      "@container",
38      className
39    )}
40    {...props}
41  />
42);
43 
44const CreditCardFlipContext = createContext(false);
45 
46export type CreditCardFlipperProps = HTMLAttributes<HTMLDivElement>;
47 
48export const CreditCardFlipper = ({
49  className,
50  children,
51  ...props
52}: CreditCardFlipperProps & { children?: ReactNode }) => {
53  const supportsHover = useSupportsHover();
54  const [isFlipped, setIsFlipped] = useState(false);
55 
56  const handleClick = () => {
57    if (!supportsHover) {
58      setIsFlipped((prev) => !prev);
59    }
60  };
61 
62  return (
63    <CreditCardFlipContext.Provider value={true}>
64      {/* biome-ignore lint/nursery/noStaticElementInteractions: tap to flip for touch devices */}
65      <div
66        aria-label="Flip credit card"
67        className={cn(
68          "h-full w-full",
69          "@xs:rounded-2xl rounded-lg",
70          "transform-3d transition duration-700 ease-in-out",
71          supportsHover &&
72            "group-hover/kibo-credit-card:-rotate-y-180 group-hover/kibo-credit-card:shadow-lg",
73          !supportsHover && isFlipped && "-rotate-y-180 shadow-lg",
74          className
75        )}
76        onClick={handleClick}
77        {...props}
78      >
79        {children}
80      </div>
81    </CreditCardFlipContext.Provider>
82  );
83};
84 
85export type CreditCardNameProps = HTMLAttributes<HTMLParagraphElement>;
86 
87export const CreditCardName = ({
88  className,
89  style,
90  ...props
91}: CreditCardNameProps) => (
92  <p
93    className={cn("font-semibold uppercase", className)}
94    style={{
95      lineHeight: "100%",
96      ...style,
97    }}
98// … truncated