"use client"; import { motion } from "framer-motion"; import { ChevronLeft, ChevronRight } from "lucide-react"; import { useState, useRef, useEffect, useMemo } from "react"; export interface CardType { title: string; description: string; image: string; } export interface Breakpoint { maxWidth: number; activeWidth: number; inactiveWidth: number; titleActive: string; titleInactive: string; } export interface ExpandingCardsProps { cards: CardType[]; breakpoints?: Breakpoint[]; gap?: string; height?: string; prevIcon?: React.ReactNode; nextIcon?: React.ReactNode; classNames?: { container?: string; card?: string; image?: string; overlay?: string; title?: string; description?: string; button?: string; buttonIcon?: string; }; transitionDuration?: number; } const DEFAULT_BREAKPOINTS: Breakpoint[] = [ { maxWidth: 640, activeWidth: 200, inactiveWidth: 100, titleActive: "20px", titleInactive: "16px", }, { maxWidth: 768, activeWidth: 300, inactiveWidth: 150, titleActive: "22px", titleInactive: "17px", }, ]; export function ExpandingCards({ cards, breakpoints = DEFAULT_BREAKPOINTS, gap = "gap-2 md:gap-4", height = "h-[300px] md:h-[350px] lg:h-[400px]", prevIcon, nextIcon, classNames, transitionDuration = 0.3, }: ExpandingCardsProps) { const [activeIndex, setActiveIndex] = useState(0); const [windowWidth, setWindowWidth] = useState(0); const containerRef = useRef(null); const cardRefs = useRef<(HTMLDivElement | null)[]>([]); useEffect(() => { const handleResize = () => setWindowWidth(window.innerWidth); handleResize(); window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); const { activeWidth, inactiveWidth, titleActive, titleInactive } = useMemo(() => { const sortedBreakpoints = [...breakpoints].sort( (a, b) => a.maxWidth - b.maxWidth ); let settings = { activeWidth: 400, inactiveWidth: 200, titleActive: "24px", titleInactive: "18px", }; for (const bp of sortedBreakpoints) { if (windowWidth <= bp.maxWidth) { settings = { activeWidth: bp.activeWidth, inactiveWidth: bp.inactiveWidth, titleActive: bp.titleActive, titleInactive: bp.titleInactive, }; } } return settings; }, [windowWidth, breakpoints]); const handleCardClick = (index: number) => setActiveIndex(index); const handlePrev = () => setActiveIndex((prev) => Math.max(0, prev - 1)); const handleNext = () => setActiveIndex((prev) => Math.min(cards.length - 1, prev + 1)); useEffect(() => { cardRefs.current[activeIndex]?.scrollIntoView({ behavior: "smooth", block: "center", inline: "center", }); }, [activeIndex]); return (

{cards.map((card, index) => ( { cardRefs.current[index] = el; }} className={`relative rounded-2xl overflow-hidden cursor-pointer flex-shrink-0 snap-start ${ classNames?.card || "" }`} animate={{ width: activeIndex === index ? activeWidth : inactiveWidth, }} transition={{ duration: transitionDuration }} onClick={() => handleCardClick(index)} >

{card.title} {card.description}

))}

); }

Expandable Cards

Mountain Adventure

Beach Paradise

City Lights

Forest Trek

Desert Safari

Northern Lights

Install Dependencies