animated-testimonials

1"use client";
2 
3import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react";
4import { motion, AnimatePresence } from "motion/react";
5 
6import { useEffect, useState } from "react";
7 
8type Testimonial = {
9  quote: string;
10  name: string;
11  designation: string;
12  src: string;
13};
14export const AnimatedTestimonials = ({
15  testimonials,
16  autoplay = false,
17}: {
18  testimonials: Testimonial[];
19  autoplay?: boolean;
20}) => {
21  const [active, setActive] = useState(0);
22 
23  const handleNext = () => {
24    setActive((prev) => (prev + 1) % testimonials.length);
25  };
26 
27  const handlePrev = () => {
28    setActive((prev) => (prev - 1 + testimonials.length) % testimonials.length);
29  };
30 
31  const isActive = (index: number) => {
32    return index === active;
33  };
34 
35  useEffect(() => {
36    if (autoplay) {
37      const interval = setInterval(handleNext, 5000);
38      return () => clearInterval(interval);
39    }
40  }, [autoplay]);
41 
42  const randomRotateY = () => {
43    return Math.floor(Math.random() * 21) - 10;
44  };
45  return (
46    <div className="mx-auto max-w-sm px-4 py-20 font-sans antialiased md:max-w-4xl md:px-8 lg:px-12">
47      <div className="relative grid grid-cols-1 gap-20 md:grid-cols-2">
48        <div>
49          <div className="relative h-80 w-full">
50            <AnimatePresence>
51              {testimonials.map((testimonial, index) => (
52                <motion.div
53                  key={testimonial.src}
54                  initial={{
55                    opacity: 0,
56                    scale: 0.9,
57                    z: -100,
58                    rotate: randomRotateY(),
59                  }}
60                  animate={{
61                    opacity: isActive(index) ? 1 : 0.7,
62                    scale: isActive(index) ? 1 : 0.95,
63                    z: isActive(index) ? 0 : -100,
64                    rotate: isActive(index) ? 0 : randomRotateY(),
65                    zIndex: isActive(index)
66                      ? 40
67                      : testimonials.length + 2 - index,
68                    y: isActive(index) ? [0, -80, 0] : 0,
69                  }}
70                  exit={{
71                    opacity: 0,
72                    scale: 0.9,
73                    z: 100,
74                    rotate: randomRotateY(),
75                  }}
76                  transition={{
77                    duration: 0.4,
78                    ease: "easeInOut",
79                  }}
80                  className="absolute inset-0 origin-bottom"
81                >
82                  <img
83// … truncated