62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T4b14,'use client' import * as React from 'react' import { Check, Clock, Copy, Gift, Lock, Mail, Share2, Target, Trophy, Users, Wallet } from 'lucide-react' import { cn } from '@/lib/utils' import { Avatar, AvatarFallback } from '@/components/ui/avatar' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Input } from '@/components/ui/input' import { Progress } from '@/components/ui/progress' import { Separator } from '@/components/ui/separator' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table' export interface MilestoneTier { id: string tier: number referralsRequired: number title: string reward: string description: string status: 'completed' | 'in-progress' | 'upcoming' } export interface ReferralActivity { id: string name: string email: string initials: string signedUpAt: string status: 'paid' | 'pending' rewardAmount: string } export interface ReferralProgramWidgetProps { referralUrl?: string referralCode?: string className?: string } const tiers: MilestoneTier[] = [ { id: 'tier-1', tier: 1, referralsRequired: 1, title: '$25 Account Credit', reward: '$25 Credit', description: 'Instant credit applied directly to your renewal balance.', status: 'completed', }, { id: 'tier-2', tier: 2, referralsRequired: 5, title: '$125 Credit + Exclusive Swag Kit', reward: '$125 + Swag Kit', description: 'Premium organic cotton hoodie and engineering desk kit.', status: 'completed', }, { id: 'tier-3', tier: 3, referralsRequired: 10, title: '$250 Credit + 1-Year Free Pro Plan', reward: '$250 + Pro Plan', description: '6 of 10 referred · 4 more needed to unlock full Pro tier.', status: 'in-progress', }, { id: 'tier-4', tier: 4, referralsRequired: 25, title: '$1,000 Credit + VIP Lifetime Access', reward: '$1,000 + VIP Pass', description: 'Direct Slack channel access to core founders and private beta track.', status: 'upcoming', }, ] const recentReferrals: ReferralActivity[] = [ { id: 'ref-1', name: 'Marcus Vance', email: 'marcus.v@acme.com', initials: 'MV', signedUpAt: 'Oct 14, 2024', status: 'paid', rewardAmount: '$25.00', }, { id: 'ref-2', name: 'Sarah Jenkins', email: 's.jenkins@designcorp.io', initials: 'SJ', signedUpAt: 'Oct 02, 2024', status: 'paid', rewardAmount: '$25.00', }, { id: 'ref-3', name: 'Devon Lane', email: 'devon@lane.co', initials: 'DL', signedUpAt: 'Sep 28, 2024', status: 'pending', rewardAmount: '$25.00', }, { id: 'ref-4', name: 'Priya Patel', email: 'priya.patel@fintech.io', initials: 'PP', signedUpAt: 'Sep 15, 2024', status: 'paid', rewardAmount: '$25.00', }, ] export function ReferralProgramWidget({ referralUrl = 'https://uipkge.dev/invite/elena-rostova', referralCode = 'ELENA25', className, }: ReferralProgramWidgetProps) { const [copiedLink, setCopiedLink] = React.useState(false) const [copiedCode, setCopiedCode] = React.useState(false) const twitterShareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent( 'Get $25 off your first year with my invite link:', )}&url=${encodeURIComponent(referralUrl)}` const linkedinShareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(referralUrl)}` const emailShareUrl = `mailto:?subject=${encodeURIComponent( 'Get $25 off your subscription', )}&body=${encodeURIComponent( `Hey,\n\nUse my invite link to get $25 off your first year:\n${referralUrl}\n\nUse invite code ${referralCode} at checkout!`, )}` const copyToClipboard = async (text: string, type: 'link' | 'code') => { try { if (navigator?.clipboard?.writeText) { await navigator.clipboard.writeText(text) } } catch { // Fallback if clipboard API is unavailable } if (type === 'link') { setCopiedLink(true) setTimeout(() => setCopiedLink(false), 2000) } else { setCopiedCode(true) setTimeout(() => setCopiedCode(false), 2000) } } return (

{/* Header Section */}

Refer Friends & Earn Credits

Give your network $25 off their first year, and earn $25 credit for every active referral.

{/* Referral Balance Card */}

Referral Balance

$150.00 Available Credit 6 Successful Referrals

1 Pending ($25.00)

{/* Share Your Referral Link Card */}

Send your personal invite link or share directly across social channels to earn rewards instantly. {/* Referral URL & Copy Action */}

{/* Social Share & Code Bar */}

{/* Share on X / Twitter */} {/* Share to LinkedIn */} {/* Share via Email */}

{/* Invite Code Button */}

{/* Milestone Rewards Progress Stepper */}

Reach referral milestones to unlock credit bonuses, swag, and exclusive plan access.

{/* Progress Stepper Track Header */}

Current Target: Tier 3 ($250 Credit + 1-Year Free Pro Plan) 60% (6 of 10 referrals)

4 more successful referrals needed to unlock Tier 3 rewards.

{/* 4 Milestone Tiers Grid */}

{tiers.map((tier) => (

Tier {tier.tier} · {tier.referralsRequired}{' '} {tier.referralsRequired === 1 ? 'Referral' : 'Referrals'} {tier.status === 'completed' && ( )} {tier.status === 'in-progress' && ( In Progress (6/10) )} {tier.status === 'upcoming' && ( )}

{tier.title}

{tier.description}

Reward Perk: {tier.reward}

))}

{/* Recent Referrals Activity Table */}

Track recent invitees, activation statuses, and credited referral payouts.

4 Recent Signups

Invitee Signed Up Status Reward Amount {recentReferrals.map((referral) => (

{referral.initials}

{referral.name}

{referral.email}

{referral.signedUpAt} {referral.status === 'paid' ? ( ) : ( )} {referral.status === 'paid' ? `+${referral.rewardAmount}` : referral.rewardAmount} ))}

) } 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/avatar.json","https://uipkge.dev/r/react/badge.json","https://uipkge.dev/r/react/button.json","https://uipkge.dev/r/react/card.json","https://uipkge.dev/r/react/input.json","https://uipkge.dev/r/react/progress.json","https://uipkge.dev/r/react/separator.json","https://uipkge.dev/r/react/table.json"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"packages/registry-react/blocks/referral-program-widget/ReferralProgramWidget.tsx","content":"$64","type":"registry:block","target":"~/components/blocks/ReferralProgramWidget.tsx"}],"className":"h-[70svh] min-h-80"}]]}]