"use client" // required for: useState (active testimonial state) /** * @name Testimonial 08 * @description A split-layout testimonial with large image on one side * and quote content on the other. Great for featured customer stories. * * @slots testimonial, testimonial-container, testimonial-grid, * testimonial-image, testimonial-content, testimonial-quote, * testimonial-author, testimonial-avatar, testimonial-info, * testimonial-company, testimonial-nav, testimonial-dot * @variant split * * @registryDependencies * @dependencies lucide-react */ import * as React from "react" import { Quote } from "lucide-react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface TestimonialItemConfig { /** Unique identifier for list key */ id: string /** Quote text */ quote: string /** Author name */ name: string /** Author role/title */ role: string /** Company name */ company: string /** Featured image URL */ image?: string /** Avatar image URL */ avatar?: string } interface Testimonial08Props { /** Array of testimonials */ testimonials?: TestimonialItemConfig[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_TESTIMONIALS: TestimonialItemConfig[] = [ { id: "split-sarah", quote: "This platform has completely transformed how our team builds products. The speed and quality improvements are remarkable. We've been able to ship features 3x faster while maintaining high code quality. I can't recommend it enough.", name: "Sarah Chen", role: "Chief Technology Officer", company: "TechFlow Inc.", image: "/assets/placeholders/placeholder-4x3.svg", avatar: "/assets/placeholders/avatar-placeholder.svg", }, { id: "split-marcus", quote: "We evaluated dozens of solutions before choosing this one. The developer experience is unmatched, and the support team goes above and beyond. It's rare to find a product that delivers on all its promises.", name: "Marcus Johnson", role: "VP of Engineering", company: "Startup Labs", image: "/assets/placeholders/placeholder-4x3.svg", avatar: "/assets/placeholders/avatar-placeholder.svg", }, { id: "split-emily", quote: "The ROI was visible within the first month. Our development velocity increased by 40%, and our team is happier than ever. This is the future of how software should be built.", name: "Emily Rodriguez", role: "Engineering Director", company: "DataSync", image: "/assets/placeholders/placeholder-4x3.svg", avatar: "/assets/placeholders/avatar-placeholder.svg", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Testimonial08({ testimonials = DEFAULT_TESTIMONIALS, className, idBase, }: Testimonial08Props) { const [activeIndex, setActiveIndex] = React.useState(0) const activeTestimonial = testimonials[activeIndex] const headingId = `${idBase ?? "testimonial-08"}-heading` return (

{/* Image */}

{activeTestimonial?.image && ( {`${activeTestimonial.name}

)}

{/* Content */}

{/* Quote Icon */} {/* Quote */}

“{activeTestimonial?.quote}”

{/* Author */}

{activeTestimonial?.avatar ? (

) : (

{activeTestimonial?.name.split(" ").map((n) => n[0]).join("")}

)}

{activeTestimonial?.name}

{activeTestimonial?.role}

{activeTestimonial?.company}

{/* Navigation Dots */} {testimonials.length > 1 && (

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

)}

) } export default Testimonial08 export { Testimonial08, type Testimonial08Props, type TestimonialItemConfig }