53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
|
|
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface RankBadgeProps {
|
|
rank: number;
|
|
size?: 'sm' | 'md' | 'lg';
|
|
showLabel?: boolean;
|
|
}
|
|
|
|
export 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 (
|
|
<Box
|
|
as="span"
|
|
display="inline-flex"
|
|
alignItems="center"
|
|
gap={1.5}
|
|
rounded="md"
|
|
border
|
|
className={`font-medium ${getRankColor(rank)} ${sizeClasses[size]}`}
|
|
>
|
|
{medal && <Text>{medal}</Text>}
|
|
{showLabel && <Text>#{rank}</Text>}
|
|
{!showLabel && !medal && <Text>#{rank}</Text>}
|
|
</Box>
|
|
);
|
|
}
|