41 lines
1019 B
TypeScript
41 lines
1019 B
TypeScript
import React from 'react';
|
|
import { Crown } from 'lucide-react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface MedalBadgeProps {
|
|
position: number;
|
|
}
|
|
|
|
export function MedalBadge({ position }: MedalBadgeProps) {
|
|
const getMedalColor = (pos: number) => {
|
|
switch (pos) {
|
|
case 1: return 'var(--warning-amber)';
|
|
case 2: return 'var(--iron-gray)';
|
|
case 3: return 'var(--amber-600)';
|
|
default: return 'var(--charcoal-outline)';
|
|
}
|
|
};
|
|
|
|
const isMedal = position <= 3;
|
|
|
|
return (
|
|
<Box
|
|
display="flex"
|
|
h="10"
|
|
w="10"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
rounded="full"
|
|
bg={isMedal ? 'bg-gradient-to-br from-yellow-400/20 to-amber-600/10' : 'bg-iron-gray'}
|
|
>
|
|
{isMedal ? (
|
|
<Icon icon={Crown} size={5} color={getMedalColor(position)} />
|
|
) : (
|
|
<Text size="lg" weight="bold" color="text-gray-400">#{position}</Text>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|