import { ChevronLeft, ChevronRight, Star } from "lucide-react"; import { useEffect, useState } from "react"; export default function TestimonialCarouselCard({ testimonials = [], autoPlay = true, interval = 5000, className = "", ...props }) { const [current, setCurrent] = useState(0); const total = testimonials.length || 1; const item = testimonials[current] || { quote: "Add testimonials to display feedback.", name: "John Doe", role: "Customer", avatar: "https://i.pravatar.cc/150?img=3", rating: 5 }; useEffect(() => { if (!autoPlay || total <= 1) return; const t = setInterval(() => setCurrent(c => (c + 1) % total), interval); return () => clearInterval(t); }, [autoPlay, interval, total]); const prev = () => setCurrent(c => (c - 1 + total) % total); const next = () => setCurrent(c => (c + 1) % total); return (

{/* Content */}

“{item.quote}”

{/* Rating */}

{[...Array(item.rating || 5)].map((_, i) => ( ))}

{/* Avatar */}

{item.name}

{item.role}

{/* Arrows */} {total > 1 && ( <> )} {/* Dots */} {total > 1 && (

{testimonials.map((_, i) => (

)}

); }

Components

Testimonial Carousel

Installation

Tailwind Setup