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 unified responsive design

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-28 15:14:52 +00:00
parent 27864d99a6
commit 99acc31e3c
10 changed files with 135 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/pages/Designers.tsx
View File

@@ -138,33 +138,42 @@ export default function Designers() {
</div>
{/* Search and Filters */}
<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 designers..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-10 h-11"
/>
</div>
<div className="flex gap-2">
<Select value={sortBy} onValueChange={setSortBy}>
<SelectTrigger className="w-[180px] h-10">
<SlidersHorizontal className="h-4 w-4 mr-2" />
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="name">Name A-Z</SelectItem>
<SelectItem value="founded">Founded (Newest)</SelectItem>
</SelectContent>
</Select>
<Button variant="outline" onClick={() => setShowFilters(!showFilters)} className="gap-2">
<Filter className="w-4 h-4" />
Filters
<ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
</Button>
<div className="mb-6 space-y-4">
<div className="flex flex-col lg:flex-row gap-4">
<div className="flex-1">
<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 designers..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-10 h-11"
/>
</div>
</div>
<div className="flex gap-2 w-full lg:w-auto">
<Select value={sortBy} onValueChange={setSortBy}>
<SelectTrigger className="w-[180px] h-10">
<SlidersHorizontal className="h-4 w-4 mr-2" />
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="name">Name A-Z</SelectItem>
<SelectItem value="founded">Founded (Newest)</SelectItem>
</SelectContent>
</Select>
<Button
variant={showFilters ? "default" : "outline"}
onClick={() => setShowFilters(!showFilters)}
className="gap-2"
>
<Filter className="w-4 h-4" />
<span className="hidden sm:inline">Filters</span>
<ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
</Button>
</div>
</div>
<Collapsible open={showFilters} onOpenChange={setShowFilters}>