"use client"

import * as React from "react"
import { cn } from "@/lib/utils"

type SocialProofLogo = {
  name: string
  logo?: React.ReactNode
}

interface SocialProofProps extends React.HTMLAttributes<HTMLDivElement> {
  label?: string
  companies: SocialProofLogo[]
}

function DefaultLogo({ name }: { name: string }) {
  return (
    <span className="text-sm font-semibold text-foreground">{name}</span>
  )
}

const SocialProof = React.forwardRef<HTMLDivElement, SocialProofProps>(
  ({ className, label = "Trusted by", companies, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={cn(
          "space-y-4 rounded-2xl border border-border bg-card p-6",
          className
        )}
        {...props}
      >
        <p className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
          {label}
        </p>
        <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
          {companies.map((company) => (
            <div
              key={company.name}
              className="flex items-center justify-center rounded-xl border border-border bg-muted px-4 py-3"
            >
              {company.logo ?? <DefaultLogo name={company.name} />}
            </div>
          ))}
        </div>
      </div>
    )
  }
)
SocialProof.displayName = "SocialProof"

export { SocialProof }
Social Proof

Dependencies

Files

Installation
