wdjones/h2h-prototype
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed rewards page.

Browse Source
This commit is contained in:
William D. Jones
2026-01-10 13:14:43 -06:00
parent 708e51f2bd
commit 88c01676b8
5 changed files with 56 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
frontend/src/components/gamification/WhaleTracker.tsx
View File

@ -48,40 +48,43 @@ export default function WhaleTracker() {
<p className="text-gray-500 text-center py-4">No big bets yet... Be the first whale!</p>
) : (
<div className="space-y-3">
{whales.map((whale: WhaleBet) => (
<div
key={whale.id}
className="bg-gradient-to-r from-green-50 to-transparent rounded-lg p-3 border-l-4 border-green-500"
>
<div className="flex items-start justify-between gap-2">
<div className="flex items-center gap-2 min-w-0">
<span className="text-xl">{getWhaleEmoji(whale.amount)}</span>
<div className="min-w-0">
<p className="text-gray-900 font-medium text-sm truncate">
{whale.display_name || whale.username}
{whales.map((whale: WhaleBet, index: number) => {
const amount = whale.amount ?? 0
return (
<div
key={whale.id ?? `whale-${index}`}
className="bg-gradient-to-r from-green-50 to-transparent rounded-lg p-3 border-l-4 border-green-500"
>
<div className="flex items-start justify-between gap-2">
<div className="flex items-center gap-2 min-w-0">
<span className="text-xl">{getWhaleEmoji(amount)}</span>
<div className="min-w-0">
<p className="text-gray-900 font-medium text-sm truncate">
{whale.display_name || whale.username || 'Unknown'}
</p>
<p className={`text-xs ${TIER_COLORS[whale.tier_name] || 'text-gray-500'}`}>
{whale.tier_name || 'Unranked'}
</p>
</div>
</div>
<div className="text-right">
<p className="text-green-600 font-bold">
${amount.toLocaleString()}
</p>
<p className={`text-xs ${TIER_COLORS[whale.tier_name] || 'text-gray-500'}`}>
{whale.tier_name}
<p className="text-gray-500 text-xs">
{whale.created_at ? formatDistanceToNow(new Date(whale.created_at), { addSuffix: true }) : 'Recently'}
</p>
</div>
</div>
<div className="text-right">
<p className="text-green-600 font-bold">
${whale.amount.toLocaleString()}
</p>
<p className="text-gray-500 text-xs">
{formatDistanceToNow(new Date(whale.created_at), { addSuffix: true })}
</p>
<div className="mt-2 text-xs text-gray-600 truncate">
<span className="text-gray-400">on</span> {whale.event_title || 'Unknown event'}
<span className="ml-2 px-1.5 py-0.5 bg-gray-100 rounded text-gray-600">
{whale.side || '-'}
</span>
</div>
</div>
<div className="mt-2 text-xs text-gray-600 truncate">
<span className="text-gray-400">on</span> {whale.event_title}
<span className="ml-2 px-1.5 py-0.5 bg-gray-100 rounded text-gray-600">
{whale.side}
</span>
</div>
</div>
))}
)
})}
</div>
)}
</div>