51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import { Icon } from '@/ui/Icon';
|
|
import { Box } from '@/ui/primitives/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { ChevronDown, ChevronUp, Minus } from 'lucide-react';
|
|
|
|
interface DeltaChipProps {
|
|
value: number;
|
|
type?: 'rank' | 'rating';
|
|
}
|
|
|
|
export function DeltaChip({ value, type = 'rank' }: DeltaChipProps) {
|
|
if (value === 0) {
|
|
return (
|
|
<Box display="flex" alignItems="center" gap={1} color="text-gray-600">
|
|
<Icon icon={Minus} size={3} />
|
|
<Text size="xs" font="mono">0</Text>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
const isPositive = value > 0;
|
|
const color = isPositive
|
|
? (type === 'rank' ? 'text-performance-green' : 'text-performance-green')
|
|
: (type === 'rank' ? 'text-error-red' : 'text-error-red');
|
|
|
|
// For rank, positive delta usually means dropping positions (e.g. +1 rank means 1st -> 2nd)
|
|
// But usually "Delta" in leaderboards means "positions gained/lost"
|
|
// Let's assume value is "positions gained" (positive = up, negative = down)
|
|
|
|
const IconComponent = isPositive ? ChevronUp : ChevronDown;
|
|
const absoluteValue = Math.abs(value);
|
|
|
|
return (
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={0.5}
|
|
color={color}
|
|
bg={`${color.replace('text-', 'bg-')}/10`}
|
|
px={1.5}
|
|
py={0.5}
|
|
rounded="full"
|
|
>
|
|
<Icon icon={IconComponent} size={3} />
|
|
<Text size="xs" font="mono" weight="bold">
|
|
{absoluteValue}
|
|
</Text>
|
|
</Box>
|
|
);
|
|
}
|