91 lines
2.5 KiB
TypeScript
91 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { Card } from '@/ui/Card';
|
|
import { useTeamStandings } from "@/lib/hooks/team";
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Badge } from '@/ui/Badge';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { Surface } from '@/ui/Surface';
|
|
|
|
interface TeamStandingsProps {
|
|
teamId: string;
|
|
leagues: string[];
|
|
}
|
|
|
|
export function TeamStandings({ teamId, leagues }: TeamStandingsProps) {
|
|
const { data: standings = [], isLoading: loading } = useTeamStandings(teamId, leagues);
|
|
|
|
if (loading) {
|
|
return (
|
|
<Card>
|
|
<Box textAlign="center" py={8}>
|
|
<Text color="text-gray-400">Loading standings...</Text>
|
|
</Box>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<Box mb={6}>
|
|
<Heading level={2}>
|
|
League Standings
|
|
</Heading>
|
|
</Box>
|
|
|
|
<Stack gap={4}>
|
|
{standings.map((standing: any) => (
|
|
<Surface
|
|
key={standing.leagueId}
|
|
variant="dark"
|
|
rounded="lg"
|
|
border
|
|
padding={4}
|
|
>
|
|
<Stack direction="row" align="center" justify="between" mb={3}>
|
|
<Heading level={4}>
|
|
{standing.leagueName}
|
|
</Heading>
|
|
<Badge variant="primary">
|
|
P{standing.position}
|
|
</Badge>
|
|
</Stack>
|
|
|
|
<Grid cols={3} gap={4}>
|
|
<Box textAlign="center">
|
|
<Text size="2xl" weight="bold" color="text-white" block>
|
|
{standing.points}
|
|
</Text>
|
|
<Text size="xs" color="text-gray-400">Points</Text>
|
|
</Box>
|
|
<Box textAlign="center">
|
|
<Text size="2xl" weight="bold" color="text-white" block>
|
|
{standing.wins}
|
|
</Text>
|
|
<Text size="xs" color="text-gray-400">Wins</Text>
|
|
</Box>
|
|
<Box textAlign="center">
|
|
<Text size="2xl" weight="bold" color="text-white" block>
|
|
{standing.racesCompleted}
|
|
</Text>
|
|
<Text size="xs" color="text-gray-400">Races</Text>
|
|
</Box>
|
|
</Grid>
|
|
</Surface>
|
|
))}
|
|
</Stack>
|
|
|
|
{standings.length === 0 && (
|
|
<Box textAlign="center" py={8}>
|
|
<Text color="text-gray-400">
|
|
No standings available yet.
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|