57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Award, ChevronRight } from 'lucide-react';
|
|
import { Card } from '@/ui/Card';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Link } from '@/ui/Link';
|
|
import { routes } from '@/lib/routing/RouteConfig';
|
|
|
|
interface Standing {
|
|
leagueId: string;
|
|
leagueName: string;
|
|
position: string;
|
|
points: string;
|
|
totalDrivers: string;
|
|
}
|
|
|
|
interface ChampionshipStandingsProps {
|
|
standings: Standing[];
|
|
}
|
|
|
|
export function ChampionshipStandings({ standings }: ChampionshipStandingsProps) {
|
|
return (
|
|
<Card>
|
|
<Stack gap={4}>
|
|
<Stack direction="row" align="center" justify="between">
|
|
<Heading level={2} icon={<Award style={{ width: '1.25rem', height: '1.25rem', color: '#facc15' }} />}>
|
|
Your Championship Standings
|
|
</Heading>
|
|
<Box>
|
|
<Link href={routes.protected.profileLeagues} variant="primary">
|
|
<Stack direction="row" align="center" gap={1}>
|
|
<Text size="sm">View all</Text>
|
|
<ChevronRight style={{ width: '1rem', height: '1rem' }} />
|
|
</Stack>
|
|
</Link>
|
|
</Box>
|
|
</Stack>
|
|
<Stack gap={3}>
|
|
{standings.map((summary) => (
|
|
<Box key={summary.leagueId} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0.75rem', backgroundColor: '#0f1115', borderRadius: '0.5rem' }}>
|
|
<Box>
|
|
<Text color="text-white" weight="medium" block>{summary.leagueName}</Text>
|
|
<Text size="xs" color="text-gray-500">Position {summary.position} • {summary.points} points</Text>
|
|
</Box>
|
|
<Text size="xs" color="text-gray-400">{summary.totalDrivers} drivers</Text>
|
|
</Box>
|
|
))}
|
|
</Stack>
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|