+ const [selectedIndex, setSelectedIndex] = useState(-1); + + const handleKeyDown = (e: React.KeyboardEvent) => { + if (!search || filteredCourts.length === 0) return; +  + switch(e.key) { + case 'ArrowDown': + e.preventDefault(); + setSelectedIndex(prev => Math.min(prev + 1, filteredCourts.length - 1)); + break; + case 'ArrowUp': + e.preventDefault(); + setSelectedIndex(prev => Math.max(prev - 1, -1)); + break; + case 'Enter': + if (selectedIndex >= 0) { + navigate(`/courts/${filteredCourts[selectedIndex].id}`); + setSearch(""); + } + break; + } + }; return ( <SearchBarContainer> <StyledSearchbar dir="auto" type="text" placeholder="Search" value={search} onChange={(e) => setSearch(e.target.value)} + onKeyDown={handleKeyDown} /> {search && filteredCourts.length > 0 && ( <SearchResultsContainer> {filteredCourts.map((court, index) => ( <StyledCard key={court.id} - selected={court.id === currentCourtId} + selected={court.id === currentCourtId || index === selectedIndex} onClick={() => { navigate(`/courts/${court.id}`); setSearch(""); }} >