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

Refactor: Implement side-by-side filter layout

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-28 15:27:50 +00:00
parent 890a6ab911
commit 703dbcd8af
5 changed files with 231 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/pages/Parks.tsx
View File

@@ -411,7 +411,7 @@ export default function Parks() {
<Button
variant={showFilters ? "default" : "outline"}
onClick={() => setShowFilters(!showFilters)}
className="shrink-0 gap-2"
className="shrink-0 gap-2 lg:hidden"
>
<Filter className="w-4 h-4" />
<span className="hidden sm:inline">Filters</span>
@@ -436,9 +436,29 @@ export default function Parks() {
</div>
</div>
{/* Advanced Filters Panel */}
<Collapsible open={showFilters} onOpenChange={setShowFilters}>
<CollapsibleContent>
{/* Mobile Filters */}
<div className="lg:hidden">
<Collapsible open={showFilters} onOpenChange={setShowFilters}>
<CollapsibleContent>
<Card>
<CardContent className="pt-6">
<ParkFilters
filters={filters}
onFiltersChange={setFilters}
parks={parks}
/>
</CardContent>
</Card>
</CollapsibleContent>
</Collapsible>
</div>
</div>
{/* Main Content Area with Sidebar */}
<div className="flex flex-col lg:flex-row gap-6">
{/* Desktop Filter Sidebar */}
<aside className="hidden lg:block lg:w-80 xl:w-96 flex-shrink-0">
<div className="sticky top-24">
<Card>
<CardContent className="pt-6">
<ParkFilters
@@ -448,36 +468,38 @@ export default function Parks() {
/>
</CardContent>
</Card>
</CollapsibleContent>
</Collapsible>
</div>
</div>
</aside>
{/* Results */}
{filteredAndSortedParks.length > 0 ? (
<div>
{viewMode === 'grid' ? (
<ParkGridView
parks={filteredAndSortedParks}
/>
{/* Results Area */}
<div className="flex-1 min-w-0">
{filteredAndSortedParks.length > 0 ? (
<div>
{viewMode === 'grid' ? (
<ParkGridView
parks={filteredAndSortedParks}
/>
) : (
<ParkListView
parks={filteredAndSortedParks}
onParkClick={handleParkClick}
/>
)}
</div>
) : (
<ParkListView
parks={filteredAndSortedParks}
onParkClick={handleParkClick}
/>
<div className="text-center py-12">
<FerrisWheel className="w-16 h-16 mb-4 opacity-50 mx-auto" />
<h3 className="text-xl font-semibold mb-2">No parks found</h3>
<p className="text-muted-foreground mb-4">
Try adjusting your search terms or filters
</p>
<Button onClick={clearAllFilters} variant="outline">
Clear all filters
</Button>
</div>
)}
</div>
) : (
<div className="text-center py-12">
<FerrisWheel className="w-16 h-16 mb-4 opacity-50 mx-auto" />
<h3 className="text-xl font-semibold mb-2">No parks found</h3>
<p className="text-muted-foreground mb-4">
Try adjusting your search terms or filters
</p>
<Button onClick={clearAllFilters} variant="outline">
Clear all filters
</Button>
</div>
)}
</div>
{/* Add Park Modal */}
<Dialog open={isAddParkModalOpen} onOpenChange={setIsAddParkModalOpen}>