"use client" import { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { ChevronLeft, ChevronRight } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; interface CardData { title: string; content: string; color: string; } interface AnimatedCardCarouselProps { cards: CardData[]; } export function AnimatedCardCarousel({ cards }: AnimatedCardCarouselProps) { const [currentIndex, setCurrentIndex] = useState(0); const nextCard = () => { setCurrentIndex((prevIndex) => (prevIndex + 1) % cards.length); }; const prevCard = () => { setCurrentIndex((prevIndex) => (prevIndex - 1 + cards.length) % cards.length); }; return (

({ x: direction > 0 ? 1000 : -1000, opacity: 0, }), center: { zIndex: 1, x: 0, opacity: 1, }, exit: (direction: number) => ({ zIndex: 0, x: direction < 0 ? 1000 : -1000, opacity: 0, }), }} initial="enter" animate="center" exit="exit" transition={{ x: { type: "spring", stiffness: 300, damping: 30 }, opacity: { duration: 0.2 }, }} >

{cards[currentIndex].title}

{cards[currentIndex].content}

); }

Animated Card Carousel

Card 1