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:
pac7
2025-10-04 14:25:58 +00:00
parent 3389c3d12c
commit 2568ad49e3

View File

@@ -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 (