// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Social Proof 08 * @description A detailed rating breakdown with star distribution bars. * Perfect for product pages showing comprehensive review statistics. * * @slots social-proof, social-proof-container, social-proof-card, * social-proof-summary, social-proof-average, social-proof-average-value, * social-proof-average-stars, social-proof-average-count, * social-proof-breakdown, social-proof-breakdown-row, * social-proof-breakdown-label, social-proof-breakdown-bar, * social-proof-breakdown-fill, social-proof-breakdown-count, * social-proof-cta * @variant rating-breakdown * * @registryDependencies button-link * @dependencies lucide-react */ import * as React from "react" import { Star } from "lucide-react" import { cn } from "@/registry/lib/utils" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ interface RatingDistribution { /** Number of 5-star reviews */ five: number /** Number of 4-star reviews */ four: number /** Number of 3-star reviews */ three: number /** Number of 2-star reviews */ two: number /** Number of 1-star reviews */ one: number } interface CtaConfig { /** CTA button text */ text: string /** CTA link */ href: string } interface SocialProof08Props { /** Average rating (out of 5) */ averageRating?: number /** Total number of reviews */ totalReviews?: number /** Rating distribution */ distribution?: RatingDistribution /** CTA action */ cta?: CtaConfig /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_DISTRIBUTION: RatingDistribution = { five: 2847, four: 892, three: 234, two: 67, one: 23, } const DEFAULT_CTA: CtaConfig = { text: "Write a review", href: "#", } // ============================================================================ // COMPONENT // ============================================================================ function SocialProof08({ averageRating = 4.8, totalReviews = 4063, distribution = DEFAULT_DISTRIBUTION, cta = DEFAULT_CTA, className, idBase, }: SocialProof08Props) { const headingId = `${idBase ?? "social-proof-08"}-heading` const total = distribution.five + distribution.four + distribution.three + distribution.two + distribution.one const getPercentage = (count: number) => { if (total === 0) return 0 return (count / total) * 100 } const distributionRows = [ { id: "row-5", stars: 5, count: distribution.five }, { id: "row-4", stars: 4, count: distribution.four }, { id: "row-3", stars: 3, count: distribution.three }, { id: "row-2", stars: 2, count: distribution.two }, { id: "row-1", stars: 1, count: distribution.one }, ] return (

Customer ratings and reviews

{/* Summary */}

{averageRating.toFixed(1)}

{[...Array(5)].map((_, i) => (

Based on {totalReviews.toLocaleString()} reviews

{/* Breakdown */}

{distributionRows.map((row) => (

{row.stars}

{row.count.toLocaleString()}

))}

{/* CTA */} {cta && ( {cta.text} )}

) } export default SocialProof08 export { SocialProof08, type SocialProof08Props, type RatingDistribution, type CtaConfig }