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

63
src/pages/Designers.tsx
View File

@@ -167,7 +167,7 @@ export default function Designers() {
<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>
@@ -176,33 +176,52 @@ export default function Designers() {
</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">
<DesignerFilters filters={filters} onFiltersChange={setFilters} designers={companies} />
</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">
<DesignerFilters filters={filters} onFiltersChange={setFilters} designers={companies} />
</CardContent>
</Card>
</CollapsibleContent>
</Collapsible>
</div>
</div>
</aside>
{/* Companies Grid */}
{filteredCompanies.length > 0 ? (
<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">
{filteredCompanies.map((company) => (
<DesignerCard key={company.id} company={company} />
))}
{/* Results Area */}
<div className="flex-1 min-w-0">
{filteredCompanies.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">
{filteredCompanies.map((company) => (
<DesignerCard key={company.id} company={company} />
))}
</div>
) : (
<div className="text-center py-12">
<Ruler className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />
<h3 className="text-xl font-semibold mb-2">No designers found</h3>
<p className="text-muted-foreground">
Try adjusting your search criteria
</p>
</div>
)}
</div>
) : (
<div className="text-center py-12">
<Ruler className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />
<h3 className="text-xl font-semibold mb-2">No designers found</h3>
<p className="text-muted-foreground">
Try adjusting your search criteria
</p>
</div>
)}
</div>
</main>
<Dialog open={isCreateModalOpen} onOpenChange={setIsCreateModalOpen}>
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">