Card Flip

1'use client';
2import React, { useState } from 'react';
3import { motion } from 'motion/react';
4import { Info, X } from 'lucide-react';
5import { cn } from '@/lib/utils';
6 
7function CardFlip({
8  className,
9  children,
10  ...props
11}: React.ComponentProps<'div'> & {
12  children: [React.ReactNode, React.ReactNode];
13}) {
14  const [isFlipped, setIsFlipped] = useState(false);
15  const [front, back] = React.Children.toArray(children);
16 
17  return (
18    <div
19      className={cn('relative w-full', className)}
20      style={{ perspective: '1000px' }}
21      {...props}
22    >
23      <motion.div
24        className='relative w-full'
25        initial={false}
26        animate={{ rotateY: isFlipped ? -180 : 0 }}
27        transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}
28        style={{ transformStyle: 'preserve-3d' }}
29      >
30        <div
31          className='w-full'
32          style={{
33            backfaceVisibility: 'hidden',
34            WebkitBackfaceVisibility: 'hidden',
35            transformStyle: 'preserve-3d',
36          }}
37        >
38          <div className='relative w-full'>
39            <button
40              onClick={() => setIsFlipped(true)}
41              className='absolute top-4 right-4 p-2 rounded-full hover:bg-muted transition-colors z-10'
42              aria-label='Show info'
43              style={{
44                opacity: isFlipped ? 0 : 1,
45                pointerEvents: isFlipped ? 'none' : 'auto',
46                transition: 'opacity 0.3s',
47              }}
48            >
49              <Info className='w-5 h-5 text-muted-foreground' />
50            </button>
51            {front}
52          </div>
53        </div>
54 
55        <div
56          className='absolute inset-0 w-full'
57          style={{
58            backfaceVisibility: 'hidden',
59            WebkitBackfaceVisibility: 'hidden',
60            transform: 'rotateY(-180deg)',
61            transformStyle: 'preserve-3d',
62          }}
63        >
64          <div className='relative w-full h-full'>
65            <button
66              onClick={() => setIsFlipped(false)}
67              className='absolute top-4 right-4 p-2 rounded-full hover:bg-muted transition-colors z-10'
68              aria-label='Close'
69              style={{
70                opacity: isFlipped ? 1 : 0,
71                pointerEvents: isFlipped ? 'auto' : 'none',
72                transition: 'opacity 0.3s',
73              }}
74            >
75              <X className='w-5 h-5 text-muted-foreground' />
76            </button>
77            {back}
78          </div>
79        </div>
80// … truncated