Expandable Cards

1'use client';
2import { useState } from 'react';
3import { motion, Variants } from 'motion/react';
4import { cn } from '@/lib/utils';
5 
6interface ExpandableCard {
7  id: number;
8  content: React.ReactNode;
9}
10 
11interface ExpandableCardsProps {
12  cards: ExpandableCard[];
13  defaultExpanded?: number;
14  className?: string;
15}
16 
17export default function ExpandableCards({
18  cards,
19  defaultExpanded = 1,
20  className,
21}: ExpandableCardsProps) {
22  const [expandedId, setExpandedId] = useState<number>(defaultExpanded);
23 
24  const cardVariants: Variants = {
25    expanded: {
26      flex: 3,
27      transition: { duration: 0.5, ease: [0.4, 0.0, 0.2, 1] },
28    },
29    collapsed: {
30      flex: 1,
31      transition: { duration: 0.5, ease: [0.4, 0.0, 0.2, 1] },
32    },
33  };
34 
35  return (
36    <div className={cn('flex gap-3 sm:gap-4 w-full h-full', className)}>
37      {cards.map((card) => {
38        const isExpanded = expandedId === card.id;
39 
40        return (
41          <motion.div
42            key={card.id}
43            className='relative h-full overflow-hidden rounded-2xl sm:rounded-3xl cursor-pointer'
44            variants={cardVariants}
45            initial={isExpanded ? 'expanded' : 'collapsed'}
46            animate={isExpanded ? 'expanded' : 'collapsed'}
47            onMouseEnter={() => setExpandedId(card.id)}
48          >
49            <div className='absolute inset-0'>{card.content}</div>
50 
51            {!isExpanded && (
52              <motion.div
53                className='absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors duration-300'
54                initial={{ opacity: 0 }}
55                whileHover={{ opacity: 1 }}
56              />
57            )}
58          </motion.div>
59        );
60      })}
61    </div>
62  );
63}