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

Refactor: Improve mobile header and navigation

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-30 11:59:31 +00:00
parent 556d1c5a97
commit 28ab241bb7
8 changed files with 523 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/pages/Operators.tsx
View File

@@ -97,40 +97,42 @@ const Operators = () => {
</div>
{/* Search and Filters */}
<div className="flex flex-col sm:flex-row gap-4 mb-8">
<div className="relative flex-1">
<div className="space-y-3 mb-6">
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
<Input
placeholder="Search park operators..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="pl-10"
className="pl-10 h-11"
/>
</div>
<Select value={sortBy} onValueChange={setSortBy}>
<SelectTrigger className="w-full sm:w-48">
<SelectValue placeholder="Sort by" />
</SelectTrigger>
<SelectContent>
<SelectItem value="name">Name</SelectItem>
<SelectItem value="rating">Rating</SelectItem>
<SelectItem value="founded">Founded Year</SelectItem>
<SelectItem value="reviews">Review Count</SelectItem>
</SelectContent>
</Select>
<div className="flex gap-2">
<Select value={sortBy} onValueChange={setSortBy}>
<SelectTrigger className="flex-1 h-10">
<SelectValue placeholder="Sort by" />
</SelectTrigger>
<SelectContent>
<SelectItem value="name">Name</SelectItem>
<SelectItem value="rating">Rating</SelectItem>
<SelectItem value="founded">Founded Year</SelectItem>
<SelectItem value="reviews">Review Count</SelectItem>
</SelectContent>
</Select>
<Select value={filterBy} onValueChange={setFilterBy}>
<SelectTrigger className="w-full sm:w-48">
<Filter className="h-4 w-4 mr-2" />
<SelectValue placeholder="Filter" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All Operators</SelectItem>
<SelectItem value="with-rating">With Ratings</SelectItem>
<SelectItem value="established">Established</SelectItem>
</SelectContent>
</Select>
<Select value={filterBy} onValueChange={setFilterBy}>
<SelectTrigger className="flex-1 h-10">
<Filter className="h-4 w-4 mr-2" />
<SelectValue placeholder="Filter" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All</SelectItem>
<SelectItem value="with-rating">Rated</SelectItem>
<SelectItem value="established">Est.</SelectItem>
</SelectContent>
</Select>
</div>
</div>
{/* Results Count */}
@@ -157,7 +159,7 @@ const Operators = () => {
{/* Operators Grid */}
{!isLoading && filteredAndSortedOperators && (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
{filteredAndSortedOperators.map((operator) => (
<OperatorCard key={operator.id} company={operator} />
))}