website refactor

apps/website/components/drivers/RatingBreakdown.tsx

@@ -0,0 +1,118 @@
+
+
+import { Box } from '@/ui/Box';
+import { Card } from '@/ui/Card';
+import { Heading } from '@/ui/Heading';
+import { RatingComponent } from '@/components/drivers/RatingComponent';
+import { RatingHistoryItem } from '@/components/drivers/RatingHistoryItem';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+
+interface RatingBreakdownProps {
+  skillRating?: number;
+  safetyRating?: number;
+  sportsmanshipRating?: number;
+}
+
+export function RatingBreakdown({ 
+  skillRating = 1450,
+  safetyRating = 92,
+  sportsmanshipRating = 4.8
+}: RatingBreakdownProps) {
+  return (
+    <Stack gap={6}>
+      <Card>
+        <Heading level={3} mb={6}>Rating Components</Heading>
+        
+        <Stack gap={6}>
+          <RatingComponent
+            label="Skill Rating"
+            value={skillRating}
+            maxValue={2000}
+            color="text-primary-blue"
+            description="Based on race results, competition strength, and consistency"
+            breakdown={[
+              { label: 'Race Results', percentage: 60 },
+              { label: 'Competition Quality', percentage: 25 },
+              { label: 'Consistency', percentage: 15 }
+            ]}
+          />
+
+          <RatingComponent
+            label="Safety Rating"
+            value={safetyRating}
+            maxValue={100}
+            color="text-performance-green"
+            suffix="%"
+            description="Reflects incident-free racing and clean overtakes"
+            breakdown={[
+              { label: 'Incident Rate', percentage: 70 },
+              { label: 'Clean Overtakes', percentage: 20 },
+              { label: 'Position Awareness', percentage: 10 }
+            ]}
+          />
+
+          <RatingComponent
+            label="Sportsmanship"
+            value={sportsmanshipRating}
+            maxValue={5}
+            color="text-warning-amber"
+            suffix="/5"
+            description="Community feedback on racing behavior and fair play"
+            breakdown={[
+              { label: 'Peer Reviews', percentage: 50 },
+              { label: 'Fair Racing', percentage: 30 },
+              { label: 'Team Play', percentage: 20 }
+            ]}
+          />
+        </Stack>
+      </Card>
+
+      <Card>
+        <Heading level={3} mb={4}>Rating History</Heading>
+        
+        <Stack gap={3}>
+          <RatingHistoryItem
+            date="November 2024"
+            skillChange={+15}
+            safetyChange={+2}
+            sportsmanshipChange={0}
+          />
+          <RatingHistoryItem
+            date="October 2024"
+            skillChange={+28}
+            safetyChange={-1}
+            sportsmanshipChange={+0.1}
+          />
+          <RatingHistoryItem
+            date="September 2024"
+            skillChange={-12}
+            safetyChange={+3}
+            sportsmanshipChange={0}
+          />
+        </Stack>
+      </Card>
+
+      <Card borderColor="border-primary-blue/30" bg="bg-charcoal-outline/20">
+        <Box display="flex" alignItems="center" gap={3} mb={3}>
+          <Text size="2xl">📈</Text>
+          <Heading level={3}>Rating Insights</Heading>
+        </Box>
+        <Stack as="ul" gap={2}>
+          <Box as="li" display="flex" alignItems="start" gap={2}>
+            <Text color="text-performance-green" mt={0.5}>✓</Text>
+            <Text size="sm" color="text-gray-400">Strong safety rating - keep up the clean racing!</Text>
+          </Box>
+          <Box as="li" display="flex" alignItems="start" gap={2}>
+            <Text color="text-warning-amber" mt={0.5}>→</Text>
+            <Text size="sm" color="text-gray-400">Skill rating improving - competitive against higher-rated drivers</Text>
+          </Box>
+          <Box as="li" display="flex" alignItems="start" gap={2}>
+            <Text color="text-primary-blue" mt={0.5}>i</Text>
+            <Text size="sm" color="text-gray-400">Complete more races to stabilize your ratings</Text>
+          </Box>
+        </Stack>
+      </Card>
+    </Stack>
+  );
+}