Files
gridpilot.gg/apps/website/ui/TeamSearchBar.tsx
2026-01-15 17:12:24 +01:00

31 lines
838 B
TypeScript

import { Box } from '@/ui/Box';
import { Icon } from '@/ui/Icon';
import { Input } from '@/ui/Input';
import { Stack } from '@/ui/Stack';
import { Search } from 'lucide-react';
interface TeamSearchBarProps {
searchQuery: string;
onSearchChange: (query: string) => void;
}
export function TeamSearchBar({ searchQuery, onSearchChange }: TeamSearchBarProps) {
return (
<Box id="teams-list" mb={6}>
<Stack direction="row" gap={4} wrap>
<Box flexGrow={1}>
<Input
type="text"
placeholder="Search teams by name, description, region, or language..."
value={searchQuery}
onChange={(e) => onSearchChange(e.target.value)}
icon={<Icon icon={Search} size={5} color="var(--text-gray-500)" />}
/>
</Box>
</Stack>
</Box>
);
}