mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-21 15:31:12 -05:00
Refactor code structure and remove redundant changes
This commit is contained in:
pacnpal
152
src-old/components/homepage/HeroSearch.tsx
Normal file
152
src-old/components/homepage/HeroSearch.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
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';
|
||||
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');
|
||||
|
||||
const popularSearches = [
|
||||
'Cedar Point', 'Disney World', 'Europa-Park', 'Six Flags Magic Mountain',
|
||||
'Alton Towers', 'Roller Coasters', 'Theme Parks', 'Water Parks'
|
||||
];
|
||||
|
||||
const parkTypes = [
|
||||
{ value: 'all', label: 'All Parks' },
|
||||
{ value: 'theme_park', label: 'Theme Parks' },
|
||||
{ value: 'amusement_park', label: 'Amusement Parks' },
|
||||
{ value: 'water_park', label: 'Water Parks' }
|
||||
];
|
||||
|
||||
const countries = [
|
||||
{ value: 'all', label: 'All Countries' },
|
||||
{ value: 'United States', label: 'United States' },
|
||||
{ value: 'Germany', label: 'Germany' },
|
||||
{ value: 'United Kingdom', label: 'United Kingdom' },
|
||||
{ value: 'Netherlands', label: 'Netherlands' }
|
||||
];
|
||||
|
||||
const handleSearch = () => {
|
||||
// Search functionality handled by AutocompleteSearch component in Header
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative max-w-4xl mx-auto">
|
||||
{/* Main Search Card */}
|
||||
<div className="bg-background/95 backdrop-blur-sm rounded-2xl border border-border/50 p-6 shadow-2xl shadow-primary/20">
|
||||
<div className="space-y-4">
|
||||
{/* Search Input Row */}
|
||||
<div className="flex flex-col md:flex-row gap-3">
|
||||
{/* Main Search */}
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted-foreground w-5 h-5" />
|
||||
<Input
|
||||
placeholder="Search parks, rides, or locations..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-12 pr-4 h-12 text-lg bg-muted/50 border-border/50 focus:border-primary/50 rounded-xl"
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Park Type Filter */}
|
||||
<Select value={selectedType} onValueChange={setSelectedType}>
|
||||
<SelectTrigger className="w-full md:w-48 h-12 bg-muted/50 border-border/50 rounded-xl">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{parkTypes.map((type) => (
|
||||
<SelectItem key={type.value} value={type.value}>
|
||||
{type.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* Country Filter */}
|
||||
<Select value={selectedCountry} onValueChange={setSelectedCountry}>
|
||||
<SelectTrigger className="w-full md:w-48 h-12 bg-muted/50 border-border/50 rounded-xl">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{countries.map((country) => (
|
||||
<SelectItem key={country.value} value={country.value}>
|
||||
{country.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* Search Button */}
|
||||
<Button
|
||||
onClick={handleSearch}
|
||||
className="h-12 px-8 bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 rounded-xl"
|
||||
>
|
||||
<Search className="w-5 h-5 md:mr-2" />
|
||||
<span className="hidden md:inline">Search</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Quick Action Buttons */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button variant="outline" size="sm" className="text-xs rounded-full">
|
||||
<MapPin className="w-3 h-3 mr-1" />
|
||||
Near Me
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" className="text-xs rounded-full">
|
||||
<Calendar className="w-3 h-3 mr-1" />
|
||||
Open Today
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" className="text-xs rounded-full">
|
||||
<Filter className="w-3 h-3 mr-1" />
|
||||
Advanced Filters
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Popular Searches */}
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-sm text-muted-foreground mb-3">Popular searches:</p>
|
||||
<div className="flex flex-wrap justify-center gap-2">
|
||||
{popularSearches.map((search, index) => (
|
||||
<Badge
|
||||
key={index}
|
||||
variant="secondary"
|
||||
className="cursor-pointer hover:bg-primary/20 transition-colors"
|
||||
onClick={() => setSearchTerm(search)}
|
||||
>
|
||||
{search}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Row */}
|
||||
<div className="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
|
||||
<div className="bg-background/50 rounded-xl p-4 border border-border/30">
|
||||
<div className="text-2xl font-bold text-primary">12+</div>
|
||||
<div className="text-xs text-muted-foreground">Parks Listed</div>
|
||||
</div>
|
||||
<div className="bg-background/50 rounded-xl p-4 border border-border/30">
|
||||
<div className="text-2xl font-bold text-secondary">500+</div>
|
||||
<div className="text-xs text-muted-foreground">Rides Tracked</div>
|
||||
</div>
|
||||
<div className="bg-background/50 rounded-xl p-4 border border-border/30">
|
||||
<div className="text-2xl font-bold text-accent">10+</div>
|
||||
<div className="text-xs text-muted-foreground">Countries</div>
|
||||
</div>
|
||||
<div className="bg-background/50 rounded-xl p-4 border border-border/30">
|
||||
<div className="text-2xl font-bold text-primary">50K+</div>
|
||||
<div className="text-xs text-muted-foreground">Reviews</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user