119 lines
3.8 KiB
TypeScript
119 lines
3.8 KiB
TypeScript
|
|
|
|
import { Box } from '@/ui/Box';
|
|
import { Card } from '@/ui/Card';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { RatingComponent } from '@/ui/RatingComponent';
|
|
import { RatingHistoryItem } from '@/ui/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>
|
|
);
|
|
}
|