41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
interface RankBadgeProps {
|
|
rank: number;
|
|
size?: 'sm' | 'md' | 'lg';
|
|
showLabel?: boolean;
|
|
}
|
|
|
|
export default function RankBadge({ rank, size = 'md', showLabel = true }: RankBadgeProps) {
|
|
const getMedalEmoji = (rank: number) => {
|
|
switch (rank) {
|
|
case 1: return '🥇';
|
|
case 2: return '🥈';
|
|
case 3: return '🥉';
|
|
default: return null;
|
|
}
|
|
};
|
|
|
|
const medal = getMedalEmoji(rank);
|
|
|
|
const sizeClasses = {
|
|
sm: 'text-sm px-2 py-1',
|
|
md: 'text-base px-3 py-1.5',
|
|
lg: 'text-lg px-4 py-2'
|
|
};
|
|
|
|
const getRankColor = (rank: number) => {
|
|
if (rank <= 3) return 'bg-warning-amber/20 text-warning-amber border-warning-amber/30';
|
|
if (rank <= 10) return 'bg-primary-blue/20 text-primary-blue border-primary-blue/30';
|
|
if (rank <= 50) return 'bg-purple-500/20 text-purple-400 border-purple-500/30';
|
|
return 'bg-charcoal-outline/20 text-gray-300 border-charcoal-outline';
|
|
};
|
|
|
|
return (
|
|
<span className={`inline-flex items-center gap-1.5 rounded font-medium border ${getRankColor(rank)} ${sizeClasses[size]}`}>
|
|
{medal && <span>{medal}</span>}
|
|
{showLabel && <span>#{rank}</span>}
|
|
{!showLabel && !medal && <span>#{rank}</span>}
|
|
</span>
|
|
);
|
|
} |