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

feat: Implement modern search with autocomplete

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-21 00:24:41 +00:00
parent 30fc531ff1
commit 3263291608
6 changed files with 783 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/homepage/SimpleHeroSearch.tsx
View File

@@ -1,13 +1,8 @@
import { useState } from 'react';
import { Search } from 'lucide-react';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
export function SimpleHeroSearch() {
const [searchTerm, setSearchTerm] = useState('');
const handleSearch = () => {
console.log('Searching for:', searchTerm);
};
return <section className="relative py-24 bg-gradient-to-br from-primary/10 via-secondary/5 to-accent/10">
return (
<section className="relative py-24 bg-gradient-to-br from-primary/10 via-secondary/5 to-accent/10">
<div className="container mx-auto px-4 text-center">
<div className="max-w-4xl mx-auto space-y-8">
<h1 className="text-5xl md:text-6xl font-bold leading-tight">
@@ -20,17 +15,18 @@ export function SimpleHeroSearch() {
The ultimate theme park database. Discover parks, track rides, and connect with enthusiasts.
</p>
{/* Simple Search */}
{/* Modern Autocomplete Search */}
<div className="max-w-2xl mx-auto">
<div className="relative">
<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-24 h-14 text-lg bg-background border-border rounded-full shadow-lg" onKeyDown={e => e.key === 'Enter' && handleSearch()} />
<Button onClick={handleSearch} className="absolute right-2 top-2 h-10 px-6 bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 rounded-full">
Search
</Button>
</div>
<AutocompleteSearch
placeholder="Search parks, rides, or locations..."
variant="hero"
types={['park', 'ride', 'company']}
limit={6}
showRecentSearches={true}
/>
</div>
</div>
</div>
</section>;
</section>
);
}