// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Testimonial 06 * @description A masonry-style testimonial grid with staggered card heights. * Creates a Pinterest-like layout with visual variety. * * @slots testimonial, testimonial-container, testimonial-header, * testimonial-heading, testimonial-description, testimonial-masonry, * testimonial-column, testimonial-card, testimonial-quote, * testimonial-author, testimonial-avatar, testimonial-info * @variant masonry * * @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 /** Author company */ company: string /** Avatar image URL */ avatar?: string } interface Testimonial06Props { /** Section heading */ heading?: string /** Section description */ description?: string /** 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: "masonry-sarah", quote: "This platform has completely transformed how we build products.", name: "Sarah Chen", role: "CTO", company: "TechFlow", avatar: "/assets/placeholders/avatar-placeholder.svg", }, { id: "masonry-marcus", quote: "We cut our development time in half. The pre-built components are production-ready and beautifully designed. Our team productivity has increased significantly since we started using this.", name: "Marcus Johnson", role: "Lead Developer", company: "Startup Labs", avatar: "/assets/placeholders/avatar-placeholder.svg", }, { id: "masonry-emily", quote: "The best investment we made for our engineering team. Support is incredible.", name: "Emily Rodriguez", role: "Engineering Manager", company: "DataSync", avatar: "/assets/placeholders/avatar-placeholder.svg", }, { id: "masonry-michael", 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. Highly recommended for any serious development team.", name: "Michael Park", role: "Product Manager", company: "InnovateCo", avatar: "/assets/placeholders/avatar-placeholder.svg", }, { id: "masonry-lisa", quote: "Seamless integration with our existing workflow. The documentation is comprehensive and easy to follow.", name: "Lisa Wang", role: "Senior Engineer", company: "CloudBase", avatar: "/assets/placeholders/avatar-placeholder.svg", }, { id: "masonry-david", quote: "A game-changer for our design system.", name: "David Kim", role: "Design Lead", company: "PixelPerfect", avatar: "/assets/placeholders/avatar-placeholder.svg", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Testimonial06({ heading = "What people are saying", description = "Don't just take our word for it — hear from our customers.", testimonials = DEFAULT_TESTIMONIALS, className, idBase, }: Testimonial06Props) { const headingId = `${idBase ?? "testimonial-06"}-heading` // Distribute testimonials into columns for masonry effect const columns = React.useMemo(() => { const cols: TestimonialItemConfig[][] = [[], [], []] testimonials.forEach((t, i) => { cols[i % 3].push(t) }) return cols }, [testimonials]) return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Masonry Grid */}

{columns.map((column, colIndex) => (

{column.map((testimonial) => (

{/* Quote */}

{/* Author */}

{testimonial.avatar ? (

) : (

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

)}

{testimonial.name}

{testimonial.role}, {testimonial.company}

))}

) } export default Testimonial06 export { Testimonial06, type Testimonial06Props, type TestimonialItemConfig }