pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-22 03:51:12 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add park and ride pages

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-20 00:55:36 +00:00
parent 27a5202458
commit 90bb0216b7
6 changed files with 1058 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/layout/Header.tsx
View File

@@ -5,9 +5,9 @@ import { Input } from '@/components/ui/input';
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
import { Badge } from '@/components/ui/badge';
import { Link, useNavigate } from 'react-router-dom';
import { SearchDropdown } from '@/components/search/SearchDropdown';
export function Header() {
const [isSearchFocused, setIsSearchFocused] = useState(false);
const navigate = useNavigate();
return (
@@ -49,7 +49,11 @@ export function Header() {
<Star className="w-4 h-4 mr-2" />
Reviews
</Button>
<Button variant="ghost" className="text-sm font-medium hover:text-primary">
<Button
variant="ghost"
className="text-sm font-medium hover:text-primary"
onClick={() => navigate('/manufacturers')}
>
🏭 Manufacturers
</Button>
</nav>
@@ -57,33 +61,7 @@ export function Header() {
{/* Search Bar */}
<div className="flex-1 max-w-xl mx-4">
<div className={`relative transition-all duration-300 ${isSearchFocused ? 'scale-105' : ''}`}>
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
<Input
placeholder="Search parks, rides, or locations..."
className={`pl-10 pr-4 bg-muted/50 border-border/50 focus:border-primary/50 transition-all duration-300 ${
isSearchFocused ? 'shadow-lg shadow-primary/10' : ''
}`}
onFocus={() => setIsSearchFocused(true)}
onBlur={() => setIsSearchFocused(false)}
/>
{isSearchFocused && (
<div className="absolute top-full mt-1 left-0 right-0 bg-card border border-border rounded-lg shadow-xl z-50 p-3">
<div className="text-sm text-muted-foreground mb-2">Popular searches</div>
<div className="flex flex-wrap gap-2">
<Badge variant="secondary" className="cursor-pointer hover:bg-primary/20">
Roller Coasters
</Badge>
<Badge variant="secondary" className="cursor-pointer hover:bg-primary/20">
Disney World
</Badge>
<Badge variant="secondary" className="cursor-pointer hover:bg-primary/20">
Cedar Point
</Badge>
</div>
</div>
)}
</div>
<SearchDropdown />
</div>
{/* User Actions */}
@@ -123,7 +101,11 @@ export function Header() {
<Star className="w-4 h-4 mr-2" />
Reviews
</Button>
<Button variant="ghost" className="justify-start">
<Button
variant="ghost"
className="justify-start"
onClick={() => navigate('/manufacturers')}
>
🏭 Manufacturers
</Button>
<div className="border-t pt-4 mt-4">