39 lines
943 B
TypeScript
39 lines
943 B
TypeScript
import { Badge } from '@/ui/Badge';
|
|
import { Text } from '@/ui/Text';
|
|
import { Group } from '@/ui/Group';
|
|
import React from 'react';
|
|
|
|
interface RankBadgeProps {
|
|
rank: number;
|
|
size?: 'sm' | 'md';
|
|
}
|
|
|
|
export function RankBadge({ rank, size = 'md' }: RankBadgeProps) {
|
|
const getVariant = (rank: number): 'warning' | 'primary' | 'info' | 'default' => {
|
|
if (rank <= 3) return 'warning';
|
|
if (rank <= 10) return 'primary';
|
|
if (rank <= 50) return 'info';
|
|
return 'default';
|
|
};
|
|
|
|
const getMedalEmoji = (rank: number) => {
|
|
switch (rank) {
|
|
case 1: return '🥇';
|
|
case 2: return '🥈';
|
|
case 3: return '🥉';
|
|
default: return null;
|
|
}
|
|
};
|
|
|
|
const medal = getMedalEmoji(rank);
|
|
|
|
return (
|
|
<Badge variant={getVariant(rank)} size={size}>
|
|
<Group gap={1}>
|
|
{medal && <Text size="xs">{medal}</Text>}
|
|
<Text size="xs" weight="bold">#{rank}</Text>
|
|
</Group>
|
|
</Badge>
|
|
);
|
|
}
|