website refactor

apps/website/components/leaderboards/SeasonSelector.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Calendar } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { Select } from '@/ui/Select';
+
+interface Season {
+  id: string;
+  name: string;
+  isActive?: boolean;
+}
+
+interface SeasonSelectorProps {
+  seasons: Season[];
+  selectedSeasonId: string;
+  onSeasonChange: (id: string) => void;
+}
+
+export function SeasonSelector({ seasons, selectedSeasonId, onSeasonChange }: SeasonSelectorProps) {
+  const options = seasons.map(season => ({
+    value: season.id,
+    label: `${season.name}${season.isActive ? ' (Active)' : ''}`
+  }));
+
+  return (
+    <Box display="flex" alignItems="center" gap={3}>
+      <Box display="flex" alignItems="center" gap={2} color="text-gray-500">
+        <Icon icon={Calendar} size={4} />
+        <Text size="xs" weight="bold" uppercase letterSpacing="wider">Season</Text>
+      </Box>
+      <Box width="48">
+        <Select
+          options={options}
+          value={selectedSeasonId}
+          onChange={(e) => onSeasonChange(e.target.value)}
+          fullWidth={true}
+        />
+      </Box>
+    </Box>
+  );
+}