website refactor

apps/website/components/leagues/SeasonProgressWidget.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+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="muted"
+      rounded="xl"
+      border
+      padding={6}
+      style={{
+        background: 'linear-gradient(to bottom right, #262626, rgba(38, 38, 38, 0.8))',
+        borderColor: 'rgba(34, 197, 94, 0.3)',
+      }}
+    >
+      <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-performance-green/10"
+          >
+            <Trophy size={20} color="var(--performance-green)" />
+          </Stack>
+          <Stack gap={0}>
+            <Text size="sm" weight="bold" color="text-white" block>
+              Season Progress
+            </Text>
+            <Text size="xs" color="text-gray-400" 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" color="text-gray-500">
+              {percentage}% Complete
+            </Text>
+            <Text size="xs" color="text-performance-green" weight="bold">
+              {completedRaces}/{totalRaces} Races
+            </Text>
+          </Stack>
+        </Stack>
+
+        {/* Visual Indicator */}
+        <Stack
+          rounded="lg"
+          bg="bg-performance-green/10"
+          border
+          borderColor="border-performance-green/30"
+          p={3}
+        >
+          <Text size="xs" color="text-performance-green" weight="medium" block>
+            {percentage >= 100
+              ? 'Season Complete! 🏆'
+              : percentage >= 50
+              ? 'Over halfway there! 🚀'
+              : 'Season underway! 🏁'}
+          </Text>
+        </Stack>
+      </Stack>
+    </Surface>
+  );
+}