Files
gridpilot.gg/apps/website/components/teams/TeamSearchBar.tsx
2026-01-18 16:43:32 +01:00

30 lines
825 B
TypeScript

import { Icon } from '@/ui/Icon';
import { Input } from '@/ui/Input';
import { Stack } from '@/ui/primitives/Stack';
import { Search } from 'lucide-react';
interface TeamSearchBarProps {
searchQuery: string;
onSearchChange: (query: string) => void;
}
export function TeamSearchBar({ searchQuery, onSearchChange }: TeamSearchBarProps) {
return (
<Stack id="teams-list" mb={6}>
<Stack direction="row" gap={4} wrap>
<Stack 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)" />}
/>
</Stack>
</Stack>
</Stack>
);
}