website refactor

apps/website/components/races/RacesCommandBar.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { Stack } from '@/ui/Stack';
+import { Button } from '@/ui/Button';
+import { Select } from '@/ui/Select';
+import { Input } from '@/ui/Input';
+import { Icon } from '@/ui/Icon';
+import { Search, SlidersHorizontal } from 'lucide-react';
+import { Surface } from '@/ui/Surface';
+import { SegmentedControl } from '@/ui/SegmentedControl';
+
+interface RacesCommandBarProps {
+  timeFilter: string;
+  setTimeFilter: (filter: any) => void;
+  leagueFilter: string;
+  setLeagueFilter: (filter: string) => void;
+  leagues: Array<{ id: string; name: string }>;
+  onShowMoreFilters: () => void;
+}
+
+export function RacesCommandBar({
+  timeFilter,
+  setTimeFilter,
+  leagueFilter,
+  setLeagueFilter,
+  leagues,
+  onShowMoreFilters,
+}: RacesCommandBarProps) {
+  const leagueOptions = [
+    { value: 'all', label: 'All Leagues' },
+    ...leagues.map(l => ({ value: l.id, label: l.name }))
+  ];
+
+  const timeOptions = [
+    { id: 'upcoming', label: 'Upcoming' },
+    { id: 'live', label: 'Live' },
+    { id: 'past', label: 'Past' },
+    { id: 'all', label: 'All' },
+  ];
+
+  return (
+    <Surface variant="precision" padding="sm">
+      <Stack direction={{ base: 'col', md: 'row' }} align="center" justify="between" gap={4}>
+        <Stack direction="row" align="center" gap={4} wrap>
+          <SegmentedControl
+            options={timeOptions}
+            activeId={timeFilter}
+            onChange={(id) => setTimeFilter(id)}
+          />
+
+          <Select
+            value={leagueFilter}
+            onChange={(e) => setLeagueFilter(e.target.value)}
+            options={leagueOptions}
+          />
+        </Stack>
+
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={onShowMoreFilters}
+          icon={<Icon icon={SlidersHorizontal} size={3} />}
+        >
+          Advanced Filters
+        </Button>
+      </Stack>
+    </Surface>
+  );
+}