39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
import { Icon } from '@/ui/Icon';
|
|
import { Text } from '@/ui/Text';
|
|
import { Badge } from '@/ui/Badge';
|
|
import { Group } from '@/ui/Group';
|
|
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 (
|
|
<Group gap={1} data-testid="trend-indicator">
|
|
<Icon icon={Minus} size={3} intent="low" />
|
|
<Text size="xs" font="mono" variant="low">0</Text>
|
|
</Group>
|
|
);
|
|
}
|
|
|
|
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" data-testid="trend-indicator">
|
|
<Group gap={0.5}>
|
|
<Icon icon={IconComponent} size={3} />
|
|
<Text size="xs" font="mono" weight="bold">
|
|
{absoluteValue}
|
|
</Text>
|
|
</Group>
|
|
</Badge>
|
|
);
|
|
}
|