mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-24 12:11:12 -05:00
feat: Implement modern search with autocomplete
This commit is contained in:
gpt-engineer-app[bot]
@@ -1,11 +1,11 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Header } from '@/components/layout/Header';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Search, Filter, SlidersHorizontal, Zap, Clock, Star } from 'lucide-react';
|
||||
import { Filter, SlidersHorizontal, Zap, Clock, Star } from 'lucide-react';
|
||||
import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
|
||||
import { Ride } from '@/types/database';
|
||||
import { supabase } from '@/integrations/supabase/client';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
@@ -160,13 +160,13 @@ export default function Rides() {
|
||||
{/* Search and Filters */}
|
||||
<div className="mb-8 space-y-4">
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
|
||||
<Input
|
||||
<div className="flex-1">
|
||||
<AutocompleteSearch
|
||||
placeholder="Search rides by name, park, or manufacturer..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-10"
|
||||
types={['ride']}
|
||||
limit={8}
|
||||
onSearch={(query) => setSearchQuery(query)}
|
||||
showRecentSearches={false}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
|
||||
233
src/pages/Search.tsx
Normal file
233
src/pages/Search.tsx
Normal file
@@ -0,0 +1,233 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useSearchParams, useNavigate } from 'react-router-dom';
|
||||
import { Header } from '@/components/layout/Header';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { Search, MapPin, Zap, Star } from 'lucide-react';
|
||||
import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
|
||||
import { useSearch, SearchResult } from '@/hooks/useSearch';
|
||||
|
||||
export default function SearchPage() {
|
||||
const [searchParams] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
const initialQuery = searchParams.get('q') || '';
|
||||
|
||||
const [activeTab, setActiveTab] = useState('all');
|
||||
const {
|
||||
query,
|
||||
setQuery,
|
||||
results,
|
||||
loading,
|
||||
search
|
||||
} = useSearch({
|
||||
types: ['park', 'ride', 'company'],
|
||||
limit: 50
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (initialQuery) {
|
||||
setQuery(initialQuery);
|
||||
}
|
||||
}, [initialQuery, setQuery]);
|
||||
|
||||
const filteredResults = results.filter(result =>
|
||||
activeTab === 'all' || result.type === activeTab
|
||||
);
|
||||
|
||||
const resultCounts = {
|
||||
all: results.length,
|
||||
park: results.filter(r => r.type === 'park').length,
|
||||
ride: results.filter(r => r.type === 'ride').length,
|
||||
company: results.filter(r => r.type === 'company').length
|
||||
};
|
||||
|
||||
const handleResultClick = (result: SearchResult) => {
|
||||
switch (result.type) {
|
||||
case 'park':
|
||||
navigate(`/parks/${result.slug || result.id}`);
|
||||
break;
|
||||
case 'ride':
|
||||
navigate(`/rides/${result.id}`);
|
||||
break;
|
||||
case 'company':
|
||||
navigate(`/companies/${result.id}`);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const getTypeIcon = (type: string) => {
|
||||
switch (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';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<Header />
|
||||
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
{/* Search Header */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<Search className="w-8 h-8 text-primary" />
|
||||
<h1 className="text-4xl font-bold">Search Results</h1>
|
||||
</div>
|
||||
|
||||
{query && (
|
||||
<p className="text-lg text-muted-foreground mb-6">
|
||||
Results for "{query}"
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Search Bar */}
|
||||
<div className="max-w-2xl">
|
||||
<AutocompleteSearch
|
||||
placeholder="Search parks, rides, or companies..."
|
||||
types={['park', 'ride', 'company']}
|
||||
limit={8}
|
||||
onSearch={(newQuery) => {
|
||||
const params = new URLSearchParams();
|
||||
params.set('q', newQuery);
|
||||
navigate(`/search?${params.toString()}`, { replace: true });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Results */}
|
||||
{query && (
|
||||
<>
|
||||
{/* Filter Tabs */}
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="mb-6">
|
||||
<TabsList>
|
||||
<TabsTrigger value="all">
|
||||
All ({resultCounts.all})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="park">
|
||||
Parks ({resultCounts.park})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="ride">
|
||||
Rides ({resultCounts.ride})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="company">
|
||||
Companies ({resultCounts.company})
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
|
||||
{/* Loading State */}
|
||||
{loading && (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results Grid */}
|
||||
{!loading && filteredResults.length > 0 && (
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredResults.map((result) => (
|
||||
<Card
|
||||
key={result.id}
|
||||
onClick={() => handleResultClick(result)}
|
||||
className="group cursor-pointer hover:shadow-lg hover:shadow-primary/10 transition-all duration-300 border-border/50 hover:border-primary/50"
|
||||
>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="text-3xl">{getTypeIcon(result.type)}</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<h3 className="font-semibold text-lg group-hover:text-primary transition-colors truncate">
|
||||
{result.title}
|
||||
</h3>
|
||||
<Badge variant="outline" className={`text-xs ${getTypeColor(result.type)}`}>
|
||||
{result.type}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<p className="text-muted-foreground text-sm mb-3 truncate">
|
||||
{result.subtitle}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{result.type === 'park' && (
|
||||
<div className="flex items-center gap-1">
|
||||
<MapPin className="w-3 h-3 text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
{result.type === 'ride' && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Zap className="w-3 h-3 text-secondary" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{result.rating && result.rating > 0 && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
|
||||
<span className="text-sm font-medium">{result.rating.toFixed(1)}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* No Results */}
|
||||
{!loading && query && filteredResults.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<div className="text-6xl mb-4 opacity-50">🔍</div>
|
||||
<h3 className="text-xl font-semibold mb-2">No results found</h3>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
Try searching for something else or adjust your search terms
|
||||
</p>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setQuery('');
|
||||
navigate('/search');
|
||||
}}
|
||||
variant="outline"
|
||||
>
|
||||
Clear search
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Initial State */}
|
||||
{!query && (
|
||||
<div className="text-center py-12">
|
||||
<div className="text-6xl mb-4 opacity-50">🔍</div>
|
||||
<h3 className="text-xl font-semibold mb-2">Start your search</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Search for theme parks, rides, or companies to get started
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user