70 lines
1.8 KiB
TypeScript
70 lines
1.8 KiB
TypeScript
'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>
|
|
);
|
|
}
|