mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-23 09:51:12 -05:00
feat: Implement modern search with autocomplete
This commit is contained in:
gpt-engineer-app[bot]
310
src/components/search/AutocompleteSearch.tsx
Normal file
310
src/components/search/AutocompleteSearch.tsx
Normal file
@@ -0,0 +1,310 @@
|
||||
import { useRef, useEffect, useState } from 'react';
|
||||
import { Search, X, Clock, Zap } from 'lucide-react';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { useSearch, SearchResult } from '@/hooks/useSearch';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
interface AutocompleteSearchProps {
|
||||
onResultSelect?: (result: SearchResult) => void;
|
||||
onSearch?: (query: string) => void;
|
||||
placeholder?: string;
|
||||
className?: string;
|
||||
types?: ('park' | 'ride' | 'company')[];
|
||||
limit?: number;
|
||||
showRecentSearches?: boolean;
|
||||
variant?: 'default' | 'hero';
|
||||
}
|
||||
|
||||
export function AutocompleteSearch({
|
||||
onResultSelect,
|
||||
onSearch,
|
||||
placeholder = "Search parks, rides, or companies...",
|
||||
className = "",
|
||||
types = ['park', 'ride', 'company'],
|
||||
limit = 8,
|
||||
showRecentSearches = true,
|
||||
variant = 'default'
|
||||
}: AutocompleteSearchProps) {
|
||||
const navigate = useNavigate();
|
||||
const searchRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [selectedIndex, setSelectedIndex] = useState(-1);
|
||||
|
||||
const {
|
||||
query,
|
||||
setQuery,
|
||||
results,
|
||||
suggestions,
|
||||
loading,
|
||||
saveSearch,
|
||||
clearRecentSearches
|
||||
} = useSearch({ types, limit });
|
||||
|
||||
const displayItems = query.length > 0 ? results : (showRecentSearches ? suggestions : []);
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (searchRef.current && !searchRef.current.contains(event.target as Node)) {
|
||||
setIsOpen(false);
|
||||
setSelectedIndex(-1);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
// Handle keyboard navigation
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (!isOpen) return;
|
||||
|
||||
switch (event.key) {
|
||||
case 'ArrowDown':
|
||||
event.preventDefault();
|
||||
setSelectedIndex(prev => Math.min(prev + 1, displayItems.length - 1));
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
event.preventDefault();
|
||||
setSelectedIndex(prev => Math.max(prev - 1, -1));
|
||||
break;
|
||||
case 'Enter':
|
||||
event.preventDefault();
|
||||
if (selectedIndex >= 0 && displayItems[selectedIndex]) {
|
||||
handleResultClick(displayItems[selectedIndex]);
|
||||
} else if (query) {
|
||||
handleSearch();
|
||||
}
|
||||
break;
|
||||
case 'Escape':
|
||||
setIsOpen(false);
|
||||
setSelectedIndex(-1);
|
||||
inputRef.current?.blur();
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
return () => document.removeEventListener('keydown', handleKeyDown);
|
||||
}, [isOpen, selectedIndex, displayItems, query]);
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
setQuery(value);
|
||||
setIsOpen(true);
|
||||
setSelectedIndex(-1);
|
||||
};
|
||||
|
||||
const handleInputFocus = () => {
|
||||
setIsOpen(true);
|
||||
};
|
||||
|
||||
const handleResultClick = (result: SearchResult | { id: string; type: string; title: string; subtitle: string; data: any }) => {
|
||||
if (result.type === 'suggestion') {
|
||||
setQuery(result.title);
|
||||
setIsOpen(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const searchResult = result as SearchResult;
|
||||
saveSearch(searchResult.title);
|
||||
|
||||
if (onResultSelect) {
|
||||
onResultSelect(searchResult);
|
||||
} else {
|
||||
// Default navigation
|
||||
switch (searchResult.type) {
|
||||
case 'park':
|
||||
navigate(`/parks/${searchResult.slug || searchResult.id}`);
|
||||
break;
|
||||
case 'ride':
|
||||
navigate(`/rides/${searchResult.id}`);
|
||||
break;
|
||||
case 'company':
|
||||
navigate(`/companies/${searchResult.id}`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
setIsOpen(false);
|
||||
setSelectedIndex(-1);
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
if (!query.trim()) return;
|
||||
|
||||
saveSearch(query);
|
||||
|
||||
if (onSearch) {
|
||||
onSearch(query);
|
||||
} else {
|
||||
// Default search behavior - navigate to search results
|
||||
navigate(`/search?q=${encodeURIComponent(query)}`);
|
||||
}
|
||||
|
||||
setIsOpen(false);
|
||||
setSelectedIndex(-1);
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
setQuery('');
|
||||
setIsOpen(false);
|
||||
setSelectedIndex(-1);
|
||||
inputRef.current?.focus();
|
||||
};
|
||||
|
||||
const getResultIcon = (result: SearchResult) => {
|
||||
switch (result.type) {
|
||||
case 'park':
|
||||
return '🏰';
|
||||
case 'ride':
|
||||
return '🎢';
|
||||
case 'company':
|
||||
return '🏭';
|
||||
default:
|
||||
return '🔍';
|
||||
}
|
||||
};
|
||||
|
||||
const getTypeColor = (type: string) => {
|
||||
switch (type) {
|
||||
case 'park':
|
||||
return 'bg-primary/10 text-primary border-primary/20';
|
||||
case 'ride':
|
||||
return 'bg-secondary/10 text-secondary border-secondary/20';
|
||||
case 'company':
|
||||
return 'bg-accent/10 text-accent border-accent/20';
|
||||
default:
|
||||
return 'bg-muted text-muted-foreground';
|
||||
}
|
||||
};
|
||||
|
||||
const isHero = variant === 'hero';
|
||||
|
||||
return (
|
||||
<div ref={searchRef} className={`relative ${className}`}>
|
||||
<div className="relative">
|
||||
<Search className={`absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground ${isHero ? 'w-5 h-5' : 'w-4 h-4'}`} />
|
||||
<Input
|
||||
ref={inputRef}
|
||||
placeholder={placeholder}
|
||||
value={query}
|
||||
onChange={handleInputChange}
|
||||
onFocus={handleInputFocus}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
|
||||
className={`${isHero ? 'pl-12 pr-24 h-14 text-lg rounded-full' : 'pl-10 pr-10'} bg-background/95 backdrop-blur border-border/50 focus:border-primary/50 transition-all duration-300 ${
|
||||
isOpen ? 'shadow-lg shadow-primary/10' : ''
|
||||
}`}
|
||||
/>
|
||||
{query && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleClear}
|
||||
className={`absolute ${isHero ? 'right-16 top-2 h-10 w-10' : 'right-1 top-1/2 transform -translate-y-1/2 h-8 w-8'} p-0 hover:bg-muted`}
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</Button>
|
||||
)}
|
||||
{isHero && (
|
||||
<Button
|
||||
onClick={handleSearch}
|
||||
className="absolute right-2 top-2 h-10 px-6 bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 rounded-full"
|
||||
>
|
||||
Search
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isOpen && displayItems.length > 0 && (
|
||||
<div className={`absolute top-full mt-1 left-0 right-0 bg-popover border border-border rounded-lg shadow-xl z-50 max-h-96 overflow-y-auto ${isHero ? 'max-w-2xl mx-auto' : ''}`}>
|
||||
<div className="p-2">
|
||||
{query.length === 0 && showRecentSearches && suggestions.length > 0 && (
|
||||
<>
|
||||
<div className="flex items-center justify-between px-3 py-2">
|
||||
<span className="text-sm text-muted-foreground">Recent searches</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={clearRecentSearches}
|
||||
className="text-xs text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Clear
|
||||
</Button>
|
||||
</div>
|
||||
<Separator className="my-2" />
|
||||
</>
|
||||
)}
|
||||
|
||||
{displayItems.map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
onClick={() => handleResultClick(item)}
|
||||
className={`flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors ${
|
||||
index === selectedIndex
|
||||
? 'bg-accent/10 border border-accent/20'
|
||||
: 'hover:bg-muted/50'
|
||||
}`}
|
||||
>
|
||||
{item.type === 'suggestion' ? (
|
||||
<>
|
||||
<Clock className="w-4 h-4 text-muted-foreground" />
|
||||
<div className="flex-1">
|
||||
<div className="font-medium">{item.title}</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="text-2xl">{getResultIcon(item as SearchResult)}</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium truncate">{item.title}</span>
|
||||
<Badge variant="outline" className={`text-xs ${getTypeColor(item.type)}`}>
|
||||
{item.type}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground truncate">
|
||||
{item.subtitle}
|
||||
</div>
|
||||
</div>
|
||||
{(item as SearchResult).rating && (item as SearchResult).rating! > 0 && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Zap className="w-3 h-3 text-yellow-500" />
|
||||
<span className="text-sm font-medium">{(item as SearchResult).rating!.toFixed(1)}</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{loading && (
|
||||
<div className="flex items-center justify-center p-4">
|
||||
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{query.length > 0 && results.length > 0 && (
|
||||
<>
|
||||
<Separator className="my-2" />
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={handleSearch}
|
||||
className="w-full text-left justify-start text-primary hover:text-primary hover:bg-primary/10"
|
||||
>
|
||||
<Search className="w-4 h-4 mr-2" />
|
||||
View all results for "{query}"
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user