Testimonials 1

1"use client";
2 
3import { getAvatarUrl, getTestimonials } from "@/lib/smoothui-data";
4import { AnimatePresence, motion, useReducedMotion } from "motion/react";
5import { useEffect, useRef, useState } from "react";
6 
7const TESTIMONIAL_COUNT = 4;
8const AVATAR_SIZE = 96;
9const DURATION = 5000; // ms
10const BAR_WIDTH = 50;
11const CIRCLE_SIZE = 12;
12const BORDER_RADIUS_ACTIVE = 8;
13const BORDER_RADIUS_INACTIVE = 999;
14const MILLISECONDS_TO_SECONDS = 1000;
15 
16const testimonials = getTestimonials(TESTIMONIAL_COUNT).map((testimonial) => ({
17  avatar: testimonial.avatar,
18  name: testimonial.name,
19  quote: testimonial.content || "",
20  role: testimonial.role,
21}));
22 
23export function TestimonialsSimple() {
24  const shouldReduceMotion = useReducedMotion();
25  const [index, setIndex] = useState(0);
26  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
27 
28  useEffect(() => {
29    timeoutRef.current = setTimeout(() => {
30      setIndex((prev) => (prev + 1) % testimonials.length);
31    }, DURATION);
32 
33    return () => {
34      if (timeoutRef.current) {
35        clearTimeout(timeoutRef.current);
36      }
37    };
38  }, []);
39 
40  return (
41    <section className="relative flex flex-col items-center bg-background py-16">
42      <div className="flex w-full max-w-5xl flex-col items-center justify-center px-4">
43        <div className="min-h-[120px] w-full">
44          <AnimatePresence mode="wait">
45            <motion.blockquote
46              animate={
47                shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
48              }
49              className="mb-8 text-center font-semibold text-2xl text-foreground leading-tight md:text-4xl"
50              exit={
51                shouldReduceMotion
52                  ? { opacity: 0, transition: { duration: 0 } }
53                  : { opacity: 0, y: -30 }
54              }
55              initial={
56                shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 30 }
57              }
58              key={index}
59              transition={
60                shouldReduceMotion
61                  ? { duration: 0 }
62                  : { duration: 0.5, type: "spring" as const }
63              }
64            >
65              &ldquo;{testimonials[index].quote}&rdquo;
66            </motion.blockquote>
67          </AnimatePresence>
68        </div>
69        <div className="flex w-full max-w-lg items-center justify-center gap-8 pt-8">
70          <AnimatePresence initial={false} mode="wait">
71            <motion.div
72              animate={
73                shouldReduceMotion
74// … truncated