pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-23 03:11:12 -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

95
src/pages/Operators.tsx
View File

@@ -238,7 +238,7 @@ const Operators = () => {
<Button
variant={showFilters ? "default" : "outline"}
onClick={() => setShowFilters(!showFilters)}
className="gap-2"
className="gap-2 lg:hidden"
>
<Filter className="w-4 h-4" />
<span className="hidden sm:inline">Filters</span>
@@ -247,49 +247,68 @@ const Operators = () => {
</div>
</div>
<Collapsible open={showFilters} onOpenChange={setShowFilters}>
<CollapsibleContent>
<Card className="mt-4">
{/* Mobile Filters */}
<div className="lg:hidden">
<Collapsible open={showFilters} onOpenChange={setShowFilters}>
<CollapsibleContent>
<Card className="mt-4">
<CardContent className="pt-6">
<OperatorFilters filters={filters} onFiltersChange={setFilters} operators={operators || []} />
</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">
<OperatorFilters filters={filters} onFiltersChange={setFilters} operators={operators || []} />
</CardContent>
</Card>
</CollapsibleContent>
</Collapsible>
</div>
</aside>
{/* Results Area */}
<div className="flex-1 min-w-0">
{/* Loading State */}
{isLoading && (
<div className="text-center py-12">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
<p className="text-muted-foreground mt-4">Loading park operators...</p>
</div>
)}
{/* Operators Grid */}
{!isLoading && filteredAndSortedOperators && filteredAndSortedOperators.length > 0 && (
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
{filteredAndSortedOperators.map((operator) => (
<OperatorCard key={operator.id} company={operator} />
))}
</div>
)}
{/* Empty State */}
{!isLoading && filteredAndSortedOperators?.length === 0 && (
<div className="text-center py-12">
<Building className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
<h3 className="text-lg font-semibold mb-2">No park operators found</h3>
<p className="text-muted-foreground">
{searchTerm
? "Try adjusting your search terms or filters"
: "No park operators are currently available"
}
</p>
</div>
)}
</div>
</div>
{/* Loading State */}
{isLoading && (
<div className="text-center py-12">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
<p className="text-muted-foreground mt-4">Loading park operators...</p>
</div>
)}
{/* Operators Grid */}
{!isLoading && filteredAndSortedOperators && (
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
{filteredAndSortedOperators.map((operator) => (
<OperatorCard key={operator.id} company={operator} />
))}
</div>
)}
{/* Empty State */}
{!isLoading && filteredAndSortedOperators?.length === 0 && (
<div className="text-center py-12">
<Building className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
<h3 className="text-lg font-semibold mb-2">No park operators found</h3>
<p className="text-muted-foreground">
{searchTerm
? "Try adjusting your search terms or filters"
: "No park operators are currently available"
}
</p>
</div>
)}
{/* Create Modal */}
<Dialog open={isCreateModalOpen} onOpenChange={setIsCreateModalOpen}>
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">