// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Testimonial 05 * @description Video testimonials section with thumbnails and play buttons. * Great for showcasing customer stories in video format. * * @slots testimonial, testimonial-container, testimonial-header, * testimonial-heading, testimonial-description, testimonial-grid, * testimonial-card, testimonial-thumbnail, testimonial-play, * testimonial-duration, testimonial-content, testimonial-quote, * testimonial-author, testimonial-avatar, testimonial-info * @variant video * * @registryDependencies button * @dependencies lucide-react */ import * as React from "react" import { Play, Quote } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Button } from "@/registry/ui/button" // ============================================================================ // TYPES // ============================================================================ interface VideoTestimonialItemConfig { /** Unique identifier for list key */ id: string /** Quote text excerpt */ quote: string /** Author name */ name: string /** Author role/title */ role: string /** Author company */ company: string /** Author avatar URL */ avatar?: string /** Video thumbnail URL */ thumbnail?: string /** Video duration (e.g., "2:34") */ duration: string } interface Testimonial05Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Array of testimonials */ testimonials?: VideoTestimonialItemConfig[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_TESTIMONIALS: VideoTestimonialItemConfig[] = [ { id: "video-sarah", quote: "The platform transformed how our entire team collaborates on projects.", name: "Sarah Chen", role: "CEO", company: "TechCorp", avatar: "/assets/placeholders/avatar-placeholder.svg", thumbnail: "/assets/placeholders/placeholder-16x9.svg", duration: "2:34", }, { id: "video-michael", quote: "We saw a 50% increase in productivity within the first quarter.", name: "Michael Park", role: "VP Engineering", company: "InnovateCo", avatar: "/assets/placeholders/avatar-placeholder.svg", thumbnail: "/assets/placeholders/placeholder-16x9.svg", duration: "3:12", }, { id: "video-emily", quote: "The best tool we've adopted this year. Our customers love it too.", name: "Emily Rodriguez", role: "Product Lead", company: "StartupXYZ", avatar: "/assets/placeholders/avatar-placeholder.svg", thumbnail: "/assets/placeholders/placeholder-16x9.svg", duration: "1:58", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Testimonial05({ heading = "Hear From Our Customers", description = "Watch real stories from teams who transformed their workflow", testimonials = DEFAULT_TESTIMONIALS, className, idBase, }: Testimonial05Props) { const headingId = `${idBase ?? "testimonial-05"}-heading` return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Grid */}

{testimonials.map((testimonial) => (

{/* Video Thumbnail */}

{testimonial.duration}

{/* Content */}

{/* Author */}

{testimonial.avatar ? (

) : (

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

)}

{testimonial.name}

{testimonial.role}, {testimonial.company}

))}

) } export default Testimonial05 export { Testimonial05, type Testimonial05Props, type VideoTestimonialItemConfig }