// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Social Proof 01 * @description A trust indicator bar with customer stats and rating badges. * Great for adding credibility above the fold on landing pages. * * @slots social-proof, social-proof-container, social-proof-metrics, * social-proof-metric, social-proof-metric-icon, social-proof-metric-value, * social-proof-metric-label * @variant bar * * @registryDependencies * @dependencies lucide-react */ import * as React from "react" import { Star, Users, Shield, Award } from "lucide-react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface TrustMetric { /** Unique identifier */ id: string /** Metric icon */ icon: React.ComponentType<{ className?: string; "aria-hidden"?: boolean | "true" | "false"; focusable?: "true" | "false" }> /** Metric value */ value: string /** Metric label */ label: string } interface SocialProof01Props { /** Trust metrics */ metrics?: TrustMetric[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultMetrics: TrustMetric[] = [ { id: "metric-1", icon: Users, value: "50,000+", label: "Happy customers", }, { id: "metric-2", icon: Star, value: "4.9/5", label: "Average rating", }, { id: "metric-3", icon: Shield, value: "99.9%", label: "Uptime SLA", }, { id: "metric-4", icon: Award, value: "#1", label: "G2 Leader 2024", }, ] // ============================================================================ // COMPONENT // ============================================================================ function SocialProof01({ metrics = defaultMetrics, className, }: SocialProof01Props) { return (

{metrics.map((metric) => (

{metric.value}

{metric.label}

))}

) } export default SocialProof01 export { SocialProof01, type SocialProof01Props, type TrustMetric }