// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Social Proof 03 * @description A FOMO-style activity feed showing recent signups/actions. * Static display of recent activity notifications. * * @slots social-proof, social-proof-container, social-proof-content, * social-proof-header, social-proof-badge, social-proof-heading, * social-proof-description, social-proof-indicator, social-proof-feed, * social-proof-activity, social-proof-avatar, social-proof-activity-content, * social-proof-activity-check * @variant activity-feed * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { CheckCircle2 } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface Activity { /** Unique identifier */ id: string /** User name */ name: string /** User location */ location?: string /** Action taken */ action: string /** Time ago */ timeAgo: string /** User avatar */ avatar?: string } interface SocialProof03Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Total user count */ totalUsers?: string /** Recent activities */ activities?: Activity[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultActivities: Activity[] = [ { id: "activity-1", name: "Sarah K.", location: "New York, US", action: "just signed up", timeAgo: "2 minutes ago", avatar: "/assets/placeholders/avatar-placeholder.svg", }, { id: "activity-2", name: "Michael C.", location: "London, UK", action: "upgraded to Pro", timeAgo: "5 minutes ago", avatar: "/assets/placeholders/avatar-placeholder.svg", }, { id: "activity-3", name: "Emma L.", location: "Toronto, CA", action: "started a free trial", timeAgo: "8 minutes ago", avatar: "/assets/placeholders/avatar-placeholder.svg", }, { id: "activity-4", name: "James W.", location: "Sydney, AU", action: "just signed up", timeAgo: "12 minutes ago", avatar: "/assets/placeholders/avatar-placeholder.svg", }, { id: "activity-5", name: "Lisa M.", location: "Berlin, DE", action: "upgraded to Enterprise", timeAgo: "15 minutes ago", avatar: "/assets/placeholders/avatar-placeholder.svg", }, ] // ============================================================================ // COMPONENT // ============================================================================ function SocialProof03({ heading = "Join thousands of happy customers", description = "See what's happening right now. Real-time activity from our community.", totalUsers = "10,000+", activities = defaultActivities, className, }: SocialProof03Props) { return (

{/* Left: Stats and Heading */}

{totalUsers} users and counting {description && (

{description}

)} {/* Live Indicator */}

Live activity feed

{/* Right: Activity Feed */}

{activities.map((activity) => (

{/* Avatar */} {activity.avatar ? (

) : (

)} {/* Content */}

{activity.name} {activity.location && ( {" "} from {activity.location} )} {" "} {activity.action}

{activity.timeAgo}

{/* Verified Icon */}

))}

) } export default SocialProof03 export { SocialProof03, type SocialProof03Props, type Activity }

{heading}