88 lines
2.2 KiB
TypeScript
88 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import { Icon } from '@/ui/Icon';
|
|
import { ProgressBar } from '@/ui/ProgressBar';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Text } from '@/ui/Text';
|
|
import { Trophy } from 'lucide-react';
|
|
|
|
interface SeasonProgressWidgetProps {
|
|
completedRaces: number;
|
|
totalRaces: number;
|
|
percentage: number;
|
|
}
|
|
|
|
export function SeasonProgressWidget({
|
|
completedRaces,
|
|
totalRaces,
|
|
percentage,
|
|
}: SeasonProgressWidgetProps) {
|
|
return (
|
|
<Surface
|
|
variant="precision"
|
|
rounded="xl"
|
|
padding={6}
|
|
>
|
|
<Stack gap={4}>
|
|
{/* Header */}
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Stack
|
|
display="flex"
|
|
h="10"
|
|
w="10"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
rounded="lg"
|
|
bg="bg-success-green/10"
|
|
>
|
|
<Icon icon={Trophy} size={4} intent="success" />
|
|
</Stack>
|
|
<Stack gap={0}>
|
|
<Text size="sm" weight="bold" variant="high" block>
|
|
Season Progress
|
|
</Text>
|
|
<Text size="xs" variant="low" block>
|
|
Race {completedRaces} of {totalRaces}
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{/* Progress Bar */}
|
|
<Stack gap={2}>
|
|
<ProgressBar
|
|
value={percentage}
|
|
intent="success"
|
|
size="lg"
|
|
/>
|
|
<Stack direction="row" justify="between" align="center">
|
|
<Text size="xs" variant="low">
|
|
{percentage}% Complete
|
|
</Text>
|
|
<Text size="xs" variant="success" weight="bold">
|
|
{completedRaces}/{totalRaces} Races
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{/* Visual Indicator */}
|
|
<Stack
|
|
rounded="lg"
|
|
bg="bg-success-green/10"
|
|
border
|
|
borderColor="border-success-green/30"
|
|
p={3}
|
|
>
|
|
<Text size="xs" variant="success" weight="medium" block>
|
|
{percentage >= 100
|
|
? 'Season Complete! 🏆'
|
|
: percentage >= 50
|
|
? 'Over halfway there! 🚀'
|
|
: 'Season underway! 🏁'}
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Surface>
|
|
);
|
|
}
|