"use client"; import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react"; import { motion, AnimatePresence } from "motion/react"; import { useEffect, useState } from "react"; type Testimonial = { quote: string; name: string; designation: string; src: string; }; export const AnimatedTestimonials = ({ testimonials, autoplay = false, }: { testimonials: Testimonial[]; autoplay?: boolean; }) => { const [active, setActive] = useState(0); const handleNext = () => { setActive((prev) => (prev + 1) % testimonials.length); }; const handlePrev = () => { setActive((prev) => (prev - 1 + testimonials.length) % testimonials.length); }; const isActive = (index: number) => { return index === active; }; useEffect(() => { if (autoplay) { const interval = setInterval(handleNext, 5000); return () => clearInterval(interval); } }, [autoplay]); const randomRotateY = () => { return Math.floor(Math.random() * 21) - 10; }; return (

{testimonials.map((testimonial, index) => ( {testimonial.name}

))}

{testimonials[active].name}

{testimonials[active].designation}

{testimonials[active].quote.split(" ").map((word, index) => ( {word} ))}

); };

Animated Testimonials

Instalação

Dependências