Animated Testimonials

1"use client";
2import { Button } from "@/components/ui/button";
3 
4import { motion, AnimatePresence } from "framer-motion";
5import { ArrowLeft, ArrowRight } from "lucide-react";
6import Image from "next/image";
7import { useState } from "react";
8type Testimonial = {
9  quote: string;
10  name: string;
11  designation: string;
12  src: string;
13};
14 
15const AnimatedTestimonialsDemo = () => {
16  const [active, setActive] = useState(testimonials[0]);
17  const handleprev = () => {
18    const currentIndex = testimonials.indexOf(active);
19    const length = testimonials.length;
20    const prevIndex = (currentIndex - 1 + length) % length;
21    setActive(testimonials[prevIndex]);
22  };
23  const handlenext = () => {
24    const currentIndex = testimonials.indexOf(active);
25    const length = testimonials.length;
26    const nextIndex = (currentIndex + 1) % length;
27    setActive(testimonials[nextIndex]);
28  };
29  const isActive = (index: number) => {
30    return testimonials[index] === active;
31  };
32 
33  const randomRotateY = () => {
34    return Math.floor(Math.random() * 21) - 10;
35  };
36 
37  return (
38    <>
39      <div className="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-4xl mx-auto">
40        <div className="relative h-80 w-full">
41          <AnimatePresence>
42            {testimonials.map((testimonial, index) => (
43              <motion.div
44                initial={{
45                  opacity: 0,
46                  scale: 0.9,
47                  z: -100,
48                  rotateY: randomRotateY(),
49                }}
50                animate={{
51                  opacity: isActive(index) ? 1 : 0.7,
52                  scale: isActive(index) ? 1 : 0.95,
53                  z: isActive(index) ? 0 : -100,
54                  rotate: isActive(index) ? 0 : randomRotateY(),
55                  zIndex: isActive(index)
56                    ? 999
57                    : testimonials.length + 2 - index,
58                  y: isActive(index) ? [0, -80, 0] : 0,
59                }}
60                exit={{
61                  opacity: 0,
62                  scale: 0.9,
63                  z: 100,
64                  rotate: randomRotateY(),
65                }}
66                transition={{
67                  duration: 0.4,
68                  ease: "easeInOut",
69                }}
70                className="absolute inset-0 origin-bottom"
71                key={active.name}
72              >
73                <Image
74                  src={testimonial.src}
75                  alt={testimonial.name}
76                  width={400}
77// … truncated