Leaderboard Card

1'use client';
2 
3import * as React from 'react';
4import { cn } from '@/lib/utils';
5import { Crown } from 'lucide-react';
6 
7type Tone = 'emerald' | 'blue' | 'zinc';
8type Size = 'sm' | 'md' | 'lg';
9 
10export type LeaderboardCardProps = {
11  name: string;
12  amount?: number | string; // e.g. 8034 or "$8,034"
13  amountPrefix?: string; // e.g. "$"
14  avatarSrc?: string;
15  avatarAlt?: string;
16  rank?: number; // 1..n (shows small badge)
17  score?: number; // 0..100 -> progress + right-aligned %
18  label?: string; // left label under pill (default "Score")
19  showCrown?: boolean; // show crown for #1
20  tone?: Tone; // background + bar color
21  size?: Size; // paddings/fonts
22  className?: string;
23  /** Optional custom avatar ring class (e.g., gradient ring) */
24  avatarRingClassName?: string;
25  /** Optional custom progress color class (overrides tone) */
26  progressClassName?: string;
27  /** Optional custom pill class */
28  pillClassName?: string;
29};
30 
31const toneMap: Record<
32  Tone,
33  {
34    card: string;
35    pill: string;
36    progressTrack: string;
37    progressFill: string;
38    name: string;
39  }
40> = {
41  emerald: {
42    card: 'bg-emerald-50/70 dark:bg-emerald-900/20 ring-1 ring-emerald-100 dark:ring-emerald-800',
43    pill: 'bg-emerald-600/90 text-emerald-50',
44    progressTrack: 'bg-emerald-200/60 dark:bg-emerald-900/50',
45    progressFill: 'bg-emerald-500',
46    name: 'text-emerald-900 dark:text-emerald-100',
47  },
48  blue: {
49    card: 'bg-blue-50/80 dark:bg-blue-900/20 ring-1 ring-blue-100 dark:ring-blue-800',
50    pill: 'bg-blue-600/90 text-blue-50',
51    progressTrack: 'bg-blue-200/60 dark:bg-blue-900/50',
52    progressFill: 'bg-blue-600',
53    name: 'text-blue-900 dark:text-blue-100',
54  },
55  zinc: {
56    card: 'bg-zinc-100/70 dark:bg-zinc-900/30 ring-1 ring-zinc-200 dark:ring-zinc-800',
57    pill: 'bg-zinc-800 text-zinc-50',
58    progressTrack: 'bg-zinc-200/60 dark:bg-zinc-800',
59    progressFill: 'bg-zinc-600',
60    name: 'text-zinc-900 dark:text-zinc-100',
61  },
62};
63 
64const sizeMap: Record<
65  Size,
66  { pad: string; name: string; pill: string; caption: string; avatar: string }
67> = {
68  sm: {
69    pad: 'p-4',
70    name: 'text-base',
71    pill: 'text-[11px] px-2.5 py-1',
72    caption: 'text-xs',
73    avatar: 'h-14 w-14',
74  },
75  md: {
76    pad: 'p-6',
77    name: 'text-lg',
78    pill: 'text-xs px-3 py-1.5',
79    caption: 'text-sm',
80    avatar: 'h-16 w-16',
81  },
82  lg: {
83    pad: 'p-8',
84    name: 'text-xl',
85    pill: 'text-sm px-3.5 py-1.5',
86    caption: 'text-sm',
87    avatar: 'h-20 w-20',
88  },
89};
90 
91// … truncated