// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Carousel 02 * @description A testimonial carousel with customer quotes and navigation. * Great for cycling through multiple customer testimonials. * * @slots carousel, carousel-container, carousel-header, carousel-badge, * carousel-heading, carousel-content, carousel-quote-icon, * carousel-quote, carousel-author, carousel-author-avatar, * carousel-author-info, carousel-author-name, carousel-author-role, * carousel-nav, carousel-prev, carousel-next, carousel-dots, carousel-dot * @variant testimonial * * @registryDependencies button badge * @dependencies lucide-react */ import * as React from "react" import { ChevronLeft, ChevronRight, Quote } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Button } from "@/registry/ui/button" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface TestimonialSlide { /** Unique identifier */ id: string /** Customer quote */ quote: string /** Customer name */ name: string /** Customer role/title */ role: string /** Customer company */ company: string /** Customer avatar initials */ initials: string } interface Carousel02Props { /** Section badge text */ badge?: string /** Section heading */ heading?: string /** Testimonial slides */ testimonials?: TestimonialSlide[] /** Auto-play interval in ms (0 to disable) */ autoPlay?: number /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultTestimonials: TestimonialSlide[] = [ { id: "testimonial-1", quote: "This product has completely transformed how our team works. We've seen a 40% increase in productivity since adopting it.", name: "Sarah Chen", role: "VP of Engineering", company: "TechCorp", initials: "SC", }, { id: "testimonial-2", quote: "The best investment we've made this year. The ROI was evident within the first month of implementation.", name: "Michael Torres", role: "CEO", company: "StartupXYZ", initials: "MT", }, { id: "testimonial-3", quote: "Outstanding support team and an incredibly intuitive product. Our onboarding took less than a day.", name: "Emily Johnson", role: "Head of Operations", company: "ScaleUp Inc", initials: "EJ", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Carousel02({ badge = "Testimonials", heading = "Loved by teams worldwide", testimonials = defaultTestimonials, autoPlay = 5000, className, }: Carousel02Props) { const [currentIndex, setCurrentIndex] = React.useState(0) const goToNext = React.useCallback(() => { setCurrentIndex((prev) => (prev + 1) % testimonials.length) }, [testimonials.length]) const goToPrev = () => { setCurrentIndex( (prev) => (prev - 1 + testimonials.length) % testimonials.length ) } React.useEffect(() => { if (autoPlay <= 0) return const interval = setInterval(goToNext, autoPlay) return () => clearInterval(interval) }, [autoPlay, goToNext]) const currentTestimonial = testimonials[currentIndex] return (

{/* Header */}

{badge}

{heading}

{/* Carousel */}

{/* Quote Icon */}

{/* Testimonial Content */}

“{currentTestimonial.quote}”

{currentTestimonial.initials}

{currentTestimonial.name}

{currentTestimonial.role} at {currentTestimonial.company}

{/* Navigation */}

{/* Progress Indicators */}

{testimonials.map((testimonial, index) => (

) } export default Carousel02 export { Carousel02, type Carousel02Props, type TestimonialSlide }