54 lines
1.1 KiB
TypeScript
54 lines
1.1 KiB
TypeScript
import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Box } from '@/ui/primitives/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Crown, Medal } from 'lucide-react';
|
|
|
|
interface RankMedalProps {
|
|
rank: number;
|
|
size?: 'sm' | 'md' | 'lg';
|
|
showIcon?: boolean;
|
|
}
|
|
|
|
export function RankMedal({ rank, size = 'md', showIcon = true }: RankMedalProps) {
|
|
const isTop3 = rank <= 3;
|
|
|
|
const sizeMap = {
|
|
sm: '7',
|
|
md: '8',
|
|
lg: '10',
|
|
};
|
|
|
|
const textSizeMap = {
|
|
sm: 'xs',
|
|
md: 'xs',
|
|
lg: 'sm',
|
|
} as const;
|
|
|
|
const iconSize = {
|
|
sm: 3,
|
|
md: 3.5,
|
|
lg: 4.5,
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
rounded="full"
|
|
border
|
|
h={sizeMap[size]}
|
|
w={sizeMap[size]}
|
|
bg={MedalDisplay.getBg(rank)}
|
|
color={MedalDisplay.getColor(rank)}
|
|
>
|
|
{isTop3 && showIcon ? (
|
|
<Icon icon={rank === 1 ? Crown : Medal} size={iconSize[size]} />
|
|
) : (
|
|
<Text weight="bold" size={textSizeMap[size]}>{rank}</Text>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|