Referrals Components

import { ReferralCard } from '@sylphx/platform-sdk/react'

export function ReferralSection() {
  return (
    <div className="max-w-md">
      <ReferralCard />
    </div>
  )
}

import { ReferralCard } from '@sylphx/platform-sdk/react'

export function ReferralPage() {
  return (
    <ReferralCard
      showLeaderboard={true}
      leaderboardLimit={10}
    />
  )
}

// Renders the card plus:
// +------------------------------------------+
// |  Top Referrers This Month                |
// |                                          |
// |  1. Alice Chen         25 referrals  [Crown Icon] |
// |  2. Bob Smith          18 referrals  [Medal Icon] |
// |  3. Carol Davis        15 referrals  [Medal Icon] |
// |  4. David Lee          12 referrals              |
// |  5. Eve Wilson          8 referrals              |
// |  ...                                             |
// |  You: #7 with 5 referrals                        |
// +------------------------------------------+

<ReferralCard
  shareChannels={['copy', 'twitter', 'whatsapp', 'email']}
  shareMessage="Join me on Acme! Use my link for 20% off your first month."
  onShare={(channel) => {
    analytics.track('referral_shared', { channel })
  }}
/>

// Show only stats without share buttons
<ReferralCard
  showStats={true}
  showShareButtons={false}
/>

<ReferralCard
  showLeaderboard={true}
  leaderboardLimit={10}
  leaderboardPeriod="month" // 'week' | 'month' | 'all-time'
/>

// Leaderboard features:
// - Top 3 users get special badges (Crown, Gold Medal, Silver Medal)
// - Current user's position is highlighted
// - Shows referral count and earnings for each user
// - Respects privacy - shows display name, not full details

import { useReferral } from '@sylphx/platform-sdk/react'

function CustomReferralUI() {
  const {
    referralCode,
    referralUrl,
    stats,
    leaderboard,
    loading,
    error,
    copyUrl,
    copied,
    share,
  } = useReferral()

  if (loading) return <Skeleton />
  if (error) return <ErrorMessage error={error} />

  return (
    <div>
      {/* Custom referral UI */}
      <input value={referralUrl} readOnly />
      <button onClick={copyUrl}>
        {copied ? 'Copied!' : 'Copy Link'}
      </button>

      <div className="stats">
        <span>{stats.signups} signups</span>
        <span>${stats.earned} earned</span>
      </div>

      <div className="share-buttons">
        <button onClick={() => share('twitter')}>
          Tweet
        </button>
        <button onClick={() => share('email')}>
          Email
        </button>
      </div>
    </div>
  )
}