// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Social Proof 07 * @description A compact live viewer/activity notification bar. * Great for creating urgency and showing real-time engagement. * * @slots social-proof, social-proof-container, social-proof-content, * social-proof-pulse, social-proof-icon, social-proof-text, * social-proof-count, social-proof-label, social-proof-actions, * social-proof-action * @variant live-notification * * @registryDependencies button-link * @dependencies lucide-react */ import * as React from "react" import { Eye } from "lucide-react" import { cn } from "@/registry/lib/utils" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ interface ActionItemConfig { /** Unique identifier for list key */ id: string /** Action button text */ text: string /** Action link */ href: string } interface SocialProof07Props { /** Icon to display */ icon?: React.ReactNode /** Current count/number */ count?: number /** Label text (e.g., "people viewing", "users online") */ label?: string /** Show animated pulse */ showPulse?: boolean /** CTA actions */ actions?: ActionItemConfig[] /** Visual variant */ variant?: "bar" | "floating" | "inline" /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // COMPONENT // ============================================================================ function SocialProof07({ icon = , count = 47, label = "people viewing this right now", showPulse = true, actions, variant = "bar", className, }: SocialProof07Props) { const variantStyles = { bar: "border-y border-border py-3", floating: "rounded-full border border-border px-6 py-3 shadow-lg", inline: "rounded-lg border border-border px-4 py-3", } return (

0 && "flex-wrap sm:justify-between" )} >

{/* Pulse Indicator */} {showPulse && ( )} {/* Icon */}

{icon}

{/* Text */}

{count.toLocaleString()} {label}

{/* Actions */} {actions && actions.length > 0 && (

{actions.map((action) => ( {action.text} ))}

)}

) } export default SocialProof07 export { SocialProof07, type SocialProof07Props, type ActionItemConfig }