Flip Card

1/* eslint-disable @next/next/no-img-element */
2'use client';
3 
4import { Button } from '@/components/ui/button';
5import { easeOut, motion } from 'motion/react';
6import * as React from 'react';
7import { Github, Linkedin, Twitter } from 'lucide-react';
8 
9export interface FlipCardData {
10  name: string;
11  username: string;
12  image: string;
13  bio: string;
14  stats: {
15    following: number;
16    followers: number;
17    posts?: number;
18  };
19  socialLinks?: {
20    linkedin?: string;
21    github?: string;
22    twitter?: string;
23  };
24}
25 
26interface FlipCardProps {
27  data: FlipCardData;
28}
29 
30export function FlipCard({ data }: FlipCardProps) {
31  const [isFlipped, setIsFlipped] = React.useState(false);
32 
33  const isTouchDevice =
34    typeof window !== 'undefined' && 'ontouchstart' in window;
35 
36  const handleClick = () => {
37    if (isTouchDevice) setIsFlipped(!isFlipped);
38  };
39 
40  const handleMouseEnter = () => {
41    if (!isTouchDevice) setIsFlipped(true);
42  };
43 
44  const handleMouseLeave = () => {
45    if (!isTouchDevice) setIsFlipped(false);
46  };
47 
48  const cardVariants = {
49    front: { rotateY: 0, transition: { duration: 0.5, ease: easeOut } },
50    back: { rotateY: 180, transition: { duration: 0.5, ease: easeOut } },
51  };
52 
53  return (
54    <div
55      className="mt-2 relative w-40 h-60 md:w-60 md:h-80 perspective-1000 cursor-pointer mx-auto"
56      onClick={handleClick}
57      onMouseEnter={handleMouseEnter}
58      onMouseLeave={handleMouseLeave}
59    >
60      {/* FRONT: Profile */}
61      <motion.div
62        className="absolute inset-0 backface-hidden rounded-md border-2 border-foreground/20 px-4 py-6 flex flex-col items-center justify-center bg-gradient-to-br from-muted via-background to-muted text-center"
63        animate={isFlipped ? 'back' : 'front'}
64        variants={cardVariants}
65        style={{ transformStyle: 'preserve-3d' }}
66      >
67        <img
68          src={data.image}
69          alt={data.name}
70          className="size-20 md:size-24 rounded-full object-cover mb-4 border-2"
71        />
72        <h2 className="text-lg font-bold text-foreground">{data.name}</h2>
73        <p className="text-sm text-muted-foreground">@{data.username}</p>
74      </motion.div>
75 
76      {/* BACK: Bio + Stats + Socials */}
77      <motion.div
78        className="absolute inset-0 backface-hidden rounded-md border-2 border-foreground/20 px-4 py-6 flex flex-col justify-between items-center gap-y-4 bg-gradient-to-tr from-muted via-background to-muted "
79        initial={{ rotateY: 180 }}
80// … truncated