38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import { Icon } from '@/ui/Icon';
|
|
import { Text } from '@/ui/Text';
|
|
import { Badge } from '@/ui/Badge';
|
|
import { ChevronDown, ChevronUp, Minus } from 'lucide-react';
|
|
import React from 'react';
|
|
|
|
interface DeltaChipProps {
|
|
value: number;
|
|
type?: 'rank' | 'rating';
|
|
}
|
|
|
|
export function DeltaChip({ value, type = 'rank' }: DeltaChipProps) {
|
|
if (value === 0) {
|
|
return (
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
|
|
<Icon icon={Minus} size={3} intent="low" />
|
|
<Text size="xs" font="mono" variant="low">0</Text>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const isPositive = value > 0;
|
|
const variant = isPositive ? 'success' : 'critical';
|
|
const IconComponent = isPositive ? ChevronUp : ChevronDown;
|
|
const absoluteValue = Math.abs(value);
|
|
|
|
return (
|
|
<Badge variant={variant} size="sm">
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.125rem' }}>
|
|
<Icon icon={IconComponent} size={3} />
|
|
<Text size="xs" font="mono" weight="bold">
|
|
{absoluteValue}
|
|
</Text>
|
|
</div>
|
|
</Badge>
|
|
);
|
|
}
|