Testimonial

1'use client';
2 
3import * as React from 'react';
4import { motion, AnimatePresence } from 'motion/react';
5import { ChevronLeft, ChevronRight } from 'lucide-react';
6import { cn } from '@/lib/utils';
7 
8export type TestimonialData = {
9  id?: React.Key;
10  avatar?: string; // img url
11  name?: string;
12  role?: string;
13  quote?: string;
14  accent?: string; // e.g. '#3b82f6' or 'rgb(...)'
15  // Supply your own node instead of quote card (gets active state + index)
16  render?: (ctx: { active: boolean; index: number }) => React.ReactNode;
17};
18 
19export type TestimonialCarouselProps = {
20  items: TestimonialData[];
21 
22  /** visual variant for default renderer */
23  variant?: 'card' | 'minimal';
24  /** looping & autoplay */
25  loop?: boolean;
26  autoplay?: boolean;
27  autoplayMs?: number;
28 
29  /** controls */
30  showArrows?: boolean;
31  showDots?: boolean;
32  allowKeyboard?: boolean;
33 
34  /** callbacks */
35  initialIndex?: number;
36  onIndexChange?: (index: number) => void;
37 
38  /** slot-style class overrides */
39  className?: string; // wrapper
40  contentClassName?: string; // inner panel
41  cardClassName?: string;
42  avatarClassName?: string;
43  nameClassName?: string;
44  roleClassName?: string;
45  quoteClassName?: string;
46 
47  /** aria */
48  ariaLabel?: string;
49};
50 
51export function TestimonialCarousel({
52  items,
53  variant = 'card',
54  loop = true,
55  autoplay = false,
56  autoplayMs = 5000,
57  showArrows = true,
58  showDots = true,
59  allowKeyboard = true,
60  initialIndex = 0,
61  onIndexChange,
62  className,
63  contentClassName,
64  cardClassName,
65  avatarClassName,
66  nameClassName,
67  roleClassName,
68  quoteClassName,
69  ariaLabel = 'Testimonials',
70}: TestimonialCarouselProps) {
71  const count = items.length;
72  const [index, setIndex] = React.useState(
73    Math.min(Math.max(initialIndex, 0), Math.max(count - 1, 0))
74  );
75  const active = ((i: number) => ((i % count) + count) % count)(index); // safe modulo
76 
77  const go = React.useCallback(
78    (delta: number) => {
79      setIndex((i) => {
80        const next = i + delta;
81        if (!loop) {
82          const clamped = Math.min(Math.max(next, 0), count - 1);
83          onIndexChange?.(clamped);
84          return clamped;
85        }
86        const wrapped = ((next % count) + count) % count;
87        onIndexChange?.(wrapped);
88        return wrapped;
89      });
90    },
91    [count, loop, onIndexChange]
92  );
93 
94  // autoplay
95  React.useEffect(() => {
96    if (!autoplay || count <= 1) return;
97    const id = setInterval(() => go(1), autoplayMs);
98    return () => clearInterval(id);
99// … truncated