49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
|
|
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface RatingHistoryItemProps {
|
|
date: string;
|
|
skillChange: number;
|
|
safetyChange: number;
|
|
sportsmanshipChange: number;
|
|
}
|
|
|
|
export function RatingHistoryItem({
|
|
date,
|
|
skillChange,
|
|
safetyChange,
|
|
sportsmanshipChange,
|
|
}: RatingHistoryItemProps) {
|
|
const formatChange = (value: number) => {
|
|
if (value === 0) return '—';
|
|
return value > 0 ? `+${value}` : `${value}`;
|
|
};
|
|
|
|
const getChangeColor = (value: number) => {
|
|
if (value === 0) return 'text-gray-500';
|
|
return value > 0 ? 'text-performance-green' : 'text-red-400';
|
|
};
|
|
|
|
return (
|
|
<Box display="flex" alignItems="center" justifyContent="between" p={3} rounded="md" bg="bg-deep-graphite" border borderColor="border-charcoal-outline">
|
|
<Text color="text-white" size="sm">{date}</Text>
|
|
<Box display="flex" alignItems="center" gap={4}>
|
|
<Box textAlign="center">
|
|
<Text size="xs" color="text-gray-500" block mb={1} style={{ fontSize: '10px' }}>Skill</Text>
|
|
<Text size="xs" weight="bold" color={getChangeColor(skillChange)}>{formatChange(skillChange)}</Text>
|
|
</Box>
|
|
<Box textAlign="center">
|
|
<Text size="xs" color="text-gray-500" block mb={1} style={{ fontSize: '10px' }}>Safety</Text>
|
|
<Text size="xs" weight="bold" color={getChangeColor(safetyChange)}>{formatChange(safetyChange)}</Text>
|
|
</Box>
|
|
<Box textAlign="center">
|
|
<Text size="xs" color="text-gray-500" block mb={1} style={{ fontSize: '10px' }}>Sports</Text>
|
|
<Text size="xs" weight="bold" color={getChangeColor(sportsmanshipChange)}>{formatChange(sportsmanshipChange)}</Text>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|