Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | 2x 36x 7x 7x 96x | import { Discipline } from '@/types/sportEvenement/discipline';
interface SearchAndFiltersProps {
searchTerm: string;
selectedDisciplineId: number | null;
disciplines: Discipline[];
onSearch: (query: string) => void;
onDisciplineFilter: (disciplineId: number | null) => void;
}
export default function SearchAndFilters({
searchTerm,
selectedDisciplineId,
disciplines,
onSearch,
onDisciplineFilter
}: SearchAndFiltersProps) {
return (
<div className="bg-white rounded-lg shadow-md p-6 mb-8">
<div className="flex flex-col sm:flex-row gap-4">
{/* Barre de recherche */}
<div className="flex-1">
<input
type="text"
placeholder="Rechercher une épreuve..."
value={searchTerm}
onChange={(e) => onSearch(e.target.value)}
className="w-full px-4 py-2 border border-gray-300 text-black rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
{/* Filtre par discipline */}
<div className="sm:w-64">
<select
value={selectedDisciplineId || ''}
onChange={(e) => onDisciplineFilter(e.target.value ? Number(e.target.value) : null)}
className="w-full px-4 py-2 border border-gray-300 text-black rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="">Toutes les disciplines</option>
{disciplines.map((discipline) => (
<option key={discipline.id} value={discipline.id}>
{discipline.nom}
</option>
))}
</select>
</div>
</div>
</div>
);
}
|