mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-24 08:31:13 -05:00
Improve search functionality by navigating to a search results page
Integrate `useNavigate` from `react-router-dom` to redirect users to a dynamic search results page (`/search`) with query parameters based on user input. Replit-Commit-Author: Agent Replit-Commit-Session-Id: f44f1d1b-1dd8-407b-8603-db12902e1a15 Replit-Commit-Checkpoint-Type: intermediate_checkpoint
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Search, MapPin, Calendar, Filter } from 'lucide-react';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -6,6 +7,7 @@ import { Badge } from '@/components/ui/badge';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
|
||||
export function HeroSearch() {
|
||||
const navigate = useNavigate();
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [selectedType, setSelectedType] = useState('all');
|
||||
const [selectedCountry, setSelectedCountry] = useState('all');
|
||||
@@ -31,8 +33,14 @@ export function HeroSearch() {
|
||||
];
|
||||
|
||||
const handleSearch = () => {
|
||||
console.log('Searching for:', searchTerm, selectedType, selectedCountry);
|
||||
// TODO: Implement actual search functionality
|
||||
if (!searchTerm.trim()) return;
|
||||
|
||||
const params = new URLSearchParams();
|
||||
params.set('q', searchTerm);
|
||||
if (selectedType !== 'all') params.set('type', selectedType);
|
||||
if (selectedCountry !== 'all') params.set('country', selectedCountry);
|
||||
|
||||
navigate(`/search?${params.toString()}`);
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user