// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Waitlist 03 * @description A gamified referral waitlist with queue position display. * Shows position, referral rewards, and share buttons. * * @slots waitlist, waitlist-container, waitlist-content, waitlist-badge, * waitlist-heading, waitlist-description, waitlist-card, * waitlist-position, waitlist-progress, waitlist-stats, * waitlist-share, waitlist-share-input, waitlist-share-buttons, * waitlist-rewards, waitlist-reward-item * @variant gamified * * @registryDependencies button input badge * @dependencies lucide-react */ import * as React from "react" import { Users, Gift, Share2, Linkedin, Link2 } from "lucide-react" import { FaXTwitter } from "react-icons/fa6" import { cn } from "@/registry/lib/utils" import { Button } from "@/registry/ui/button" import { Input } from "@/registry/ui/input" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface RewardTier { /** Unique identifier */ id: string /** Number of referrals needed */ referrals: number /** Reward description */ reward: string } interface Waitlist03Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Current position in queue */ queuePosition?: number /** Total people in queue */ totalInQueue?: number /** Number of referrals made */ referralCount?: number /** Referral link */ referralLink?: string /** Reward tiers */ rewardTiers?: RewardTier[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultRewardTiers: RewardTier[] = [ { id: "tier-1", referrals: 3, reward: "Jump 100 spots in line" }, { id: "tier-2", referrals: 5, reward: "1 month free subscription" }, { id: "tier-3", referrals: 10, reward: "Lifetime early adopter discount" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Waitlist03({ heading = "You're on the list!", description = "Share your unique link to move up the queue and unlock rewards.", queuePosition = 1234, totalInQueue = 5000, referralCount = 0, referralLink = "https://example.com/ref/abc123", rewardTiers = defaultRewardTiers, className, }: Waitlist03Props) { const progress = ((totalInQueue - queuePosition) / totalInQueue) * 100 return (

{/* Badge */} {/* Heading */}

{heading}

{description && (

{description}

)} {/* Position Card */}

{/* Queue Position */}

Your position in line

#{queuePosition.toLocaleString()}

{/* Progress Bar */}

Start Front of line

{/* Referral Stats */}

{referralCount}

Referrals

{/* Share Link */}

Share your referral link

{/* Social Share */}

{/* Reward Tiers */}

{rewardTiers.map((tier) => (

= tier.referrals ? "border-primary bg-primary/5" : "border-border bg-card" )} >

= tier.referrals ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground" )} > {tier.referrals}

{tier.reward}

{referralCount >= tier.referrals && ( Unlocked )}

))}

) } export default Waitlist03 export { Waitlist03, type Waitlist03Props, type RewardTier }