Flip Card

1"use client";
2import React, { useRef, useState } from "react";
3import { motion } from "motion/react";
4import { ArrowRight } from "lucide-react";
5import { cn } from "@/lib/utils";
6 
7interface FlipCardProps {
8  frontContent: {
9    title: string;
10    subtitle?: string;
11  };
12  backContent: {
13    title: string;
14    description: string;
15  };
16  width?: string;
17  height?: string;
18  flipDirection?: "horizontal" | "vertical";
19  triggerMode?: "hover" | "click";
20}
21 
22const FlipCard: React.FC<FlipCardProps> = ({
23  frontContent,
24  backContent,
25  width = "300px",
26  height = "200px",
27  flipDirection = "horizontal",
28  triggerMode = "hover",
29}) => {
30  const [isFlipped, setIsFlipped] = useState(false);
31  const cardRef = useRef<HTMLDivElement>(null);
32 
33  const toggleFlip = () => {
34    if (triggerMode === "click") {
35      setIsFlipped(!isFlipped);
36    }
37  };
38 
39  const rotateValue =
40    flipDirection === "horizontal" ? "rotateY(180deg)" : "rotateX(180deg)";
41 
42  const cardStyle = {
43    width,
44    height,
45    perspective: "1000px",
46  };
47 
48  const faceClassNames = cn(
49    "absolute flex h-full w-full flex-col items-center justify-center p-6",
50    "rounded-2xl border border-gray-200 shadow-lg backface-hidden",
51    "overflow-hidden dark:border-gray-700",
52  );
53 
54  return (
55    <div
56      ref={cardRef}
57      style={cardStyle}
58      onMouseEnter={() => {
59        if (triggerMode === "hover") setIsFlipped(true);
60      }}
61      onMouseLeave={() => {
62        if (triggerMode === "hover") setIsFlipped(false);
63      }}
64      onClick={toggleFlip}
65      className="relative cursor-pointer rounded-2xl"
66    >
67      <motion.div
68        className="relative h-full w-full rounded-2xl"
69        style={{ transformStyle: "preserve-3d" }}
70        animate={{ transform: isFlipped ? rotateValue : "none" }}
71        transition={{ duration: 0.6, ease: [0.23, 1, 0.32, 1] }}
72      >
73        <div
74          className={cn(
75            faceClassNames,
76            "bg-gradient-to-br from-white to-gray-100 dark:from-gray-800 dark:to-gray-900",
77          )}
78        >
79          <h3 className="mb-2 text-2xl font-semibold text-gray-800 dark:text-white">
80            {frontContent.title}
81          </h3>
82          {frontContent.subtitle && (
83            <p className="text-sm text-gray-600 dark:text-gray-300">
84              {frontContent.subtitle}
85            </p>
86          )}
87          <ArrowRight className="absolute right-4 bottom-4 h-6 w-6 text-gray-400 dark:text-gray-500" />
88        </div>
89        <div
90          className={cn(
91// … truncated