// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Testimonial 03 * @description A carousel/slider testimonial section with manual navigation. * Shows one testimonial at a time with smooth transitions. * * @slots testimonial, testimonial-container, testimonial-header, testimonial-heading, * testimonial-description, testimonial-carousel, testimonial-quote-icon, * testimonial-rating, testimonial-quote, testimonial-author, testimonial-avatar, * testimonial-author-info, testimonial-nav, testimonial-nav-prev, testimonial-nav-next, * testimonial-dots * @variant carousel * * @registryDependencies button * @dependencies lucide-react */ import * as React from "react" import { ChevronLeft, ChevronRight, Star, Quote } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Button } from "@/registry/ui/button" // ============================================================================ // TYPES // ============================================================================ interface Testimonial { /** Unique identifier */ id: string /** Quote text */ quote: string /** Author name */ name: string /** Author role/title */ role: string /** Author company */ company: string /** Author avatar URL */ avatar?: string /** Star rating (1-5) */ rating?: number } interface Testimonial03Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Array of testimonials */ testimonials?: Testimonial[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultTestimonials: Testimonial[] = [ { id: "testimonial-1", quote: "This product has completely transformed how we work. The time savings alone have been worth the investment, and our team productivity has increased by 40%.", name: "Sarah Chen", role: "VP of Engineering", company: "TechCorp", avatar: "/assets/placeholders/avatar-placeholder.svg", rating: 5, }, { id: "testimonial-2", quote: "I've tried many similar tools, but nothing comes close to this. The user experience is exceptional, and the support team is incredibly responsive.", name: "Michael Park", role: "Product Manager", company: "InnovateCo", avatar: "/assets/placeholders/avatar-placeholder.svg", rating: 5, }, { id: "testimonial-3", quote: "We migrated from our old system in just a week. The onboarding was smooth, and we saw ROI within the first month. Highly recommended!", name: "Emily Rodriguez", role: "CTO", company: "StartupXYZ", avatar: "/assets/placeholders/avatar-placeholder.svg", rating: 5, }, ] // ============================================================================ // COMPONENT // ============================================================================ function Testimonial03({ heading = "What our customers say", description = "Don't just take our word for it. Here's what our customers have to say.", testimonials = defaultTestimonials, className, }: Testimonial03Props) { const [activeIndex, setActiveIndex] = React.useState(0) const goToPrevious = () => { setActiveIndex((prev) => prev === 0 ? testimonials.length - 1 : prev - 1 ) } const goToNext = () => { setActiveIndex((prev) => prev === testimonials.length - 1 ? 0 : prev + 1 ) } const activeTestimonial = testimonials[activeIndex] return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Carousel */}

{/* Quote Icon */}

{/* Testimonial Content */}

{/* Rating */} {activeTestimonial?.rating && (

{Array.from({ length: 5 }).map((_, i) => (

)} {/* Quote */}

“{activeTestimonial?.quote}”

{/* Author */}

{activeTestimonial?.avatar && (

)}

{activeTestimonial?.name}

{activeTestimonial?.role}, {activeTestimonial?.company}

{/* Navigation */}

{/* Dots */}

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

) } export default Testimonial03 export { Testimonial03, type Testimonial03Props, type Testimonial }