Testimonial Carousel

import { InfiniteScroll } from "@/components/ui/infinite-scroll";
import { Star, Quote } from "lucide-react";
 
interface Testimonial {
  id: string;
  name: string;
  role: string;
  company: string;
  content: string;
  rating: number;
  image?: string;
}
 
interface TestimonialCarouselProps {
  testimonials: Testimonial[];
  direction?: "normal" | "reverse";
  duration?: number;
  pauseOnHover?: boolean;
  showFade?: boolean;
  variant?: "default" | "compact" | "card";
}
 
export function TestimonialCarousel({
  testimonials,
  direction = "normal",
  duration = 30000,
  pauseOnHover = true,
  showFade = true,
  variant = "default",
}: TestimonialCarouselProps) {
  if (variant === "compact") {
    return (
      <InfiniteScroll
        direction={direction}
        duration={duration}
        pauseOnHover={pauseOnHover}
        showFade={showFade}
        className="py-8"
      >
        {testimonials.map((testimonial) => (
          <div
            key={testimonial.id}
            className="mx-3 w-[400px] flex-shrink-0 rounded-xl border border-zinc-800 bg-zinc-900/50 p-6 backdrop-blur-sm"
          >
            <div className="mb-4 flex items-center gap-1">
              {Array.from({ length: 5 }).map((_, i) => (
                <Star
                  key={i}
                  className={`h-4 w-4 ${
                    i < testimonial.rating
                      ? "fill-yellow-500 text-yellow-500"
                      : "fill-zinc-700 text-zinc-700"
                  }`}
                />
              ))}
            </div>
            <p className="mb-4 text-sm leading-relaxed text-zinc-300">
              {testimonial.content}
            </p>
            <div className="flex items-center gap-3">
              {testimonial.image ? (
                <img
                  src={testimonial.image}
                  alt={testimonial.name}
                  className="h-10 w-10 rounded-full object-cover"
                />
              ) : (
                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-orange-600 text-sm font-semibold text-white">
                  {testimonial.name.charAt(0)}
                </div>
              )}
              <div>
                <div className="text-sm font-semibold text-white">
                  {testimonial.name}
                </div>
                <div className="text-xs text-zinc-500">
                  {testimonial.role} at {testimonial.company}
                </div>
              </div>
            </div>
          </div>
        ))}
      </InfiniteScroll>
    );
  }
 
  if (variant === "card") {
    return (
      <InfiniteScroll
        direction={direction}
        duration={duration}
        pauseOnHover={pauseOnHover}
        showFade={showFade}
        className="py-8"
      >
        {testimonials.map((testimonial) => (
          <div
            key={testimonial.id}
            className="group mx-3 w-[450px] flex-shrink-0 rounded-2xl border border-zinc-800 bg-zinc-900 p-8 shadow-xl transition-all hover:border-zinc-700 hover:shadow-2xl"
          >
            <Quote className="mb-4 h-8 w-8 text-orange-500/30" />
            <p className="mb-6 text-base leading-relaxed text-zinc-200">
              "{testimonial.content}"
            </p>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4">
                {testimonial.image ? (
                  <img
                    src={testimonial.image}
                    alt={testimonial.name}
                    className="h-12 w-12 rounded-full object-cover ring-2 ring-zinc-800"
                  />
                ) : (
                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-orange-600 text-base font-bold text-white ring-2 ring-zinc-800">
                    {testimonial.name.charAt(0)}
                  </div>
                )}
                <div>
                  <div className="font-semibold text-white">
                    {testimonial.name}
                  </div>
                  <div className="text-sm text-zinc-400">
                    {testimonial.role}
                  </div>
                  <div className="text-xs text-zinc-500">
                    {testimonial.company}
                  </div>
                </div>
              </div>
              <div className="flex items-center gap-1">
                {Array.from({ length: 5 }).map((_, i) => (
                  <Star
                    key={i}
                    className={`h-4 w-4 ${
                      i < testimonial.rating
                        ? "fill-yellow-500 text-yellow-500"
                        : "fill-zinc-800 text-zinc-800"
                    }`}
                  />
                ))}
              </div>
            </div>
          </div>
        ))}
      </InfiniteScroll>
    );
  }
 
  // Default variant
  return (
    <InfiniteScroll
      direction={direction}
      duration={duration}
      pauseOnHover={pauseOnHover}
      showFade={showFade}
      className="py-8"
    >
      {testimonials.map((testimonial) => (
        <div
          key={testimonial.id}
          className="mx-4 w-[500px] flex-shrink-0 rounded-2xl border border-zinc-800 bg-zinc-950 p-8 shadow-2xl"
        >
          <div className="mb-6 flex items-start justify-between">
            <div className="flex items-center gap-4">
              {testimonial.image ? (
                <img
                  src={testimonial.image}
                  alt={testimonial.name}
                  className="h-14 w-14 rounded-full object-cover"
                />
              ) : (
                <div className="flex h-14 w-14 items-center justify-center rounded-full bg-orange-600 text-lg font-bold text-white">
                  {testimonial.name.charAt(0)}
                </div>
              )}
              <div>
                <div className="text-lg font-bold text-white">
                  {testimonial.name}
                </div>
                <div className="text-sm text-zinc-400">{testimonial.role}</div>
                <div className="text-xs text-zinc-500">
                  {testimonial.company}
                </div>
              </div>
            </div>
            <div className="flex items-center gap-1">
              {Array.from({ length: 5 }).map((_, i) => (
                <Star
                  key={i}
                  className={`h-5 w-5 ${
                    i < testimonial.rating
                      ? "fill-yellow-500 text-yellow-500"
                      : "fill-zinc-800 text-zinc-800"
                  }`}
                />
              ))}
            </div>
          </div>
          <p className="text-base leading-relaxed text-zinc-300">
            "{testimonial.content}"
          </p>
        </div>
      ))}
    </InfiniteScroll>
  );
}

"use client";
 
import React, { useRef, useEffect, useState } from "react";
import { motion, useAnimationControls } from "framer-motion";
import { cn } from "@/lib/utils";
 
interface InfiniteScrollProps {
  /** Additional CSS classes to apply to the container */
  className?: string;
  /** Duration of the scroll animation in milliseconds. Default is 15000 */
  duration?: number;
  /** Direction of the scroll animation. Can be "normal" (left to right) or "reverse" (right to left) */
  direction?: "normal" | "reverse";
  /** Background color for the fade effect container. Default is "#ffffff" */
  containerColor?: string;
  /** Whether to show the fade effect at the edges. Default is true */
  showFade?: boolean;
  /** Content to be scrolled infinitely */
  children: React.ReactNode;
  /** Whether to pause the animation when hovering over the content. Default is true */
  pauseOnHover?: boolean;
}
 
export function InfiniteScroll({
  className,
  duration = 15000,
  direction = "normal",
  containerColor = "#ffffff",
  showFade = true,
  children,
  pauseOnHover = true,
}: InfiniteScrollProps) {
  const [contentWidth, setContentWidth] = useState<number>(0);
  const [isPaused, setIsPaused] = useState(false);
  const scrollerRef = useRef<HTMLDivElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);
  const controls = useAnimationControls();
  const elapsedTimeRef = useRef(0);
  const lastTimeRef = useRef(0);
 
  useEffect(() => {
    const content = contentRef.current;
    if (!content) return;
 
    const updateWidth = () => {
      const width = content.offsetWidth;
      setContentWidth(width);
    };
 
    updateWidth();
    window.addEventListener("resize", updateWidth);
    return () => window.removeEventListener("resize", updateWidth);
  }, [children]);
 
  useEffect(() => {
    if (!contentWidth) return;
 
    const startX = direction === "normal" ? 0 : -contentWidth;
    const endX = direction === "normal" ? -contentWidth : 0;
 
    if (!isPaused) {
      const remainingDuration = duration - elapsedTimeRef.current;
      const progress = elapsedTimeRef.current / duration;
      const currentX =
        direction === "normal"
          ? startX + (endX - startX) * progress
          : endX + (startX - endX) * (1 - progress);
 
      controls.set({ x: currentX });
      controls.start({
        x: endX,
        transition: {
          duration: remainingDuration / 1000,
          ease: "linear",
          repeat: Infinity,
          repeatType: "loop",
          repeatDelay: 0,
        },
      });
 
      lastTimeRef.current = Date.now();
    }
  }, [controls, direction, duration, contentWidth, isPaused]);
 
  const handleMouseEnter = () => {
    if (!pauseOnHover) return;
 
    const currentTime = Date.now();
    const deltaTime = currentTime - lastTimeRef.current;
    elapsedTimeRef.current = (elapsedTimeRef.current + deltaTime) % duration;
 
    setIsPaused(true);
    controls.stop();
  };
 
  const handleMouseLeave = () => {
    if (!pauseOnHover) return;
    lastTimeRef.current = Date.now();
    setIsPaused(false);
  };
 
  return (
    <div
      className={cn(
        "relative flex shrink-0 flex-col gap-4 overflow-hidden py-3",
        className,
      )}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      <div className="flex">
        <motion.div
          ref={scrollerRef}
          className="flex shrink-0"
          animate={controls}
        >
          <div ref={contentRef} className="flex shrink-0">
            {children}
          </div>
          <div className="flex shrink-0">{children}</div>
          <div className="flex shrink-0">{children}</div>
        </motion.div>
      </div>
      {showFade && (
        <div
          className="pointer-events-none absolute inset-0 bg-linear-to-r from-background via-transparent to-background"
          style={{ "--container-color": containerColor } as React.CSSProperties}
        />
      )}
    </div>
  );
}