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

Refactor: Reorganize filter and sort controls

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-28 15:49:41 +00:00
parent c48509efc4
commit 832f53a126
6 changed files with 119 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/pages/Rides.tsx
View File

@@ -169,6 +169,22 @@ export default function Rides() {
{/* Search and Filters */}
<div className="mb-8 space-y-4">
<div className="flex flex-col md:flex-row gap-4">
{/* Desktop: Filter toggle on the left */}
<Button
variant="outline"
onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
className="shrink-0 gap-2 hidden lg:flex"
title={sidebarCollapsed ? "Show filters" : "Hide filters"}
>
{sidebarCollapsed ? (
<PanelLeftOpen className="w-4 h-4" />
) : (
<PanelLeftClose className="w-4 h-4" />
)}
<span>Filters</span>
</Button>
{/* Search bar takes remaining space */}
<div className="flex-1">
<AutocompleteSearch
placeholder="Search rides by name, park, or manufacturer..."
@@ -178,21 +194,24 @@ export default function Rides() {
showRecentSearches={false}
/>
</div>
{/* Sort controls - more compact */}
<div className="flex gap-2">
<Select value={sortBy} onValueChange={setSortBy}>
<SelectTrigger className="w-[180px]">
<SelectTrigger className="w-[160px]">
<SlidersHorizontal className="w-4 h-4 mr-2" />
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="name">Name A-Z</SelectItem>
<SelectItem value="rating">Highest Rated</SelectItem>
<SelectItem value="speed">Fastest</SelectItem>
<SelectItem value="height">Tallest</SelectItem>
<SelectItem value="reviews">Most Reviews</SelectItem>
<SelectItem value="name">Name</SelectItem>
<SelectItem value="rating">Rating</SelectItem>
<SelectItem value="speed">Speed</SelectItem>
<SelectItem value="height">Height</SelectItem>
<SelectItem value="reviews">Reviews</SelectItem>
</SelectContent>
</Select>
{/* Mobile filter toggle */}
<Button
variant={showFilters ? "default" : "outline"}
onClick={() => setShowFilters(!showFilters)}
@@ -202,15 +221,6 @@ export default function Rides() {
<span className="hidden sm:inline">Filters</span>
<ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
</Button>
<Button
variant="outline"
onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
className="gap-2 hidden lg:flex"
title={sidebarCollapsed ? "Show filters" : "Hide filters"}
>
<PanelLeftClose className={`w-4 h-4 transition-transform ${sidebarCollapsed ? 'rotate-180' : ''}`} />
</Button>
</div>
</div>