// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Testimonial 04 * @description A testimonial grid with company logos and star ratings. * Great for B2B social proof with brand recognition. * * @slots testimonial, testimonial-container, testimonial-header, * testimonial-heading, testimonial-description, testimonial-grid, * testimonial-card, testimonial-company, testimonial-rating, * testimonial-quote, testimonial-author, testimonial-avatar, testimonial-info * @variant logo-grid * * @registryDependencies * @dependencies lucide-react */ import * as React from "react" import { Quote, Star } 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 /** Author avatar URL */ avatar?: string /** Star rating (1-5) */ rating?: number } interface Testimonial04Props { /** 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: "testimonial-sarah", quote: "This platform has revolutionized how we work. The ROI was visible within the first month.", name: "Sarah Chen", role: "VP of Engineering", company: "TechCorp", avatar: "/assets/placeholders/avatar-placeholder.svg", rating: 5, }, { id: "testimonial-michael", quote: "Best investment we've made this year. Our team productivity increased by 40%.", name: "Michael Park", role: "CEO", company: "InnovateCo", avatar: "/assets/placeholders/avatar-placeholder.svg", rating: 5, }, { id: "testimonial-emily", quote: "The support team is exceptional. They helped us migrate in just 3 days.", name: "Emily Rodriguez", role: "CTO", company: "StartupXYZ", avatar: "/assets/placeholders/avatar-placeholder.svg", rating: 5, }, { id: "testimonial-james", quote: "We've tried many solutions but this one stands out in terms of ease of use.", name: "James Wilson", role: "Product Lead", company: "DesignLab", avatar: "/assets/placeholders/avatar-placeholder.svg", rating: 4, }, ] // ============================================================================ // COMPONENT // ============================================================================ function Testimonial04({ heading = "Trusted by Industry Leaders", description = "See what companies are saying about our platform", testimonials = DEFAULT_TESTIMONIALS, className, idBase, }: Testimonial04Props) { const headingId = `${idBase ?? "testimonial-04"}-heading` return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Grid */}

{testimonials.map((testimonial) => (

{/* Company & Rating */}

{testimonial.company}

{testimonial.rating && (

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

)}

{/* Quote */}

{/* Author */}

{testimonial.avatar ? (

) : (

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

)}

{testimonial.name}

{testimonial.role}, {testimonial.company}

))}

) } export default Testimonial04 export { Testimonial04, type Testimonial04Props, type TestimonialItemConfig }