71 lines
1.5 KiB
TypeScript
71 lines
1.5 KiB
TypeScript
import { Icon } from './Icon';
|
|
import { Text } from './Text';
|
|
import { Surface } from './Surface';
|
|
import { Crown, Medal } from 'lucide-react';
|
|
import React from 'react';
|
|
|
|
export interface RankMedalProps {
|
|
rank: number;
|
|
size?: 'sm' | 'md' | 'lg';
|
|
showIcon?: boolean;
|
|
variant?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry' | 'default';
|
|
bg?: string;
|
|
color?: string;
|
|
}
|
|
|
|
/**
|
|
* RankMedal is a semantic UI component for displaying a rank with a medal icon or number.
|
|
* It follows the "Modern Precision" theme.
|
|
*/
|
|
export const RankMedal = ({
|
|
rank,
|
|
size = 'md',
|
|
showIcon = true,
|
|
variant,
|
|
bg,
|
|
color
|
|
}: RankMedalProps) => {
|
|
const isTop3 = rank <= 3;
|
|
|
|
const sizePx = {
|
|
sm: '1.75rem',
|
|
md: '2rem',
|
|
lg: '2.5rem',
|
|
};
|
|
|
|
const textSizeMap = {
|
|
sm: 'xs',
|
|
md: 'xs',
|
|
lg: 'sm',
|
|
} as const;
|
|
|
|
const iconSize = {
|
|
sm: 3,
|
|
md: 3.5,
|
|
lg: 4.5,
|
|
};
|
|
|
|
return (
|
|
<Surface
|
|
variant="muted"
|
|
rounded="full"
|
|
style={{
|
|
height: sizePx[size],
|
|
width: sizePx[size],
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
border: '1px solid var(--ui-color-border-default)',
|
|
backgroundColor: bg,
|
|
color: color
|
|
}}
|
|
>
|
|
{isTop3 && showIcon ? (
|
|
<Icon icon={rank === 1 ? Crown : Medal} size={iconSize[size] as any} intent={variant as any} />
|
|
) : (
|
|
<Text weight="bold" size={textSizeMap[size]} variant={variant as any}>{rank}</Text>
|
|
)}
|
|
</Surface>
|
|
);
|
|
};
|