website refactor

apps/website/components/drivers/RatingHistoryItem.tsx

@@ -0,0 +1,48 @@
+
+
+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>
+  );
+}