mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-22 20:11:12 -05:00
Refactor: Reorganize filter and sort controls
This commit is contained in:
gpt-engineer-app[bot]
@@ -12,10 +12,10 @@ export function ParkSortOptions({ sort, onSortChange }: ParkSortOptionsProps) {
|
||||
const sortOptions = [
|
||||
{ value: 'name', label: 'Name' },
|
||||
{ value: 'rating', label: 'Rating' },
|
||||
{ value: 'rides', label: 'Ride Count' },
|
||||
{ value: 'coasters', label: 'Coaster Count' },
|
||||
{ value: 'reviews', label: 'Review Count' },
|
||||
{ value: 'opening', label: 'Opening Date' },
|
||||
{ value: 'rides', label: 'Rides' },
|
||||
{ value: 'coasters', label: 'Coasters' },
|
||||
{ value: 'reviews', label: 'Reviews' },
|
||||
{ value: 'opening', label: 'Opening' },
|
||||
];
|
||||
|
||||
const toggleDirection = () => {
|
||||
@@ -26,19 +26,19 @@ export function ParkSortOptions({ sort, onSortChange }: ParkSortOptionsProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex gap-2 flex-1">
|
||||
<div className="flex gap-2">
|
||||
<Select
|
||||
value={sort.field}
|
||||
onValueChange={(field) => onSortChange({ ...sort, field })}
|
||||
>
|
||||
<SelectTrigger className="flex-1 bg-muted/50 border-border/50">
|
||||
<SelectTrigger className="w-[160px] bg-muted/50 border-border/50">
|
||||
<ArrowUpDown className="w-4 h-4 mr-2" />
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{sortOptions.map(option => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
Sort by {option.label}
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
|
||||
@@ -149,6 +149,22 @@ export default function Designers() {
|
||||
{/* Search and Filters */}
|
||||
<div className="mb-6 space-y-4">
|
||||
<div className="flex flex-col lg: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">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
|
||||
@@ -161,18 +177,20 @@ export default function Designers() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sort controls - more compact */}
|
||||
<div className="flex gap-2 w-full lg:w-auto">
|
||||
<Select value={sortBy} onValueChange={setSortBy}>
|
||||
<SelectTrigger className="w-[180px] h-10">
|
||||
<SelectTrigger className="w-[160px] 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>
|
||||
<SelectItem value="name">Name</SelectItem>
|
||||
<SelectItem value="founded">Founded</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* Mobile filter toggle */}
|
||||
<Button
|
||||
variant={showFilters ? "default" : "outline"}
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
@@ -182,15 +200,6 @@ export default function Designers() {
|
||||
<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>
|
||||
|
||||
|
||||
@@ -162,6 +162,22 @@ export default function Manufacturers() {
|
||||
{/* Search and Filters */}
|
||||
<div className="mb-6 space-y-4">
|
||||
<div className="flex flex-col lg: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">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
|
||||
@@ -174,18 +190,20 @@ export default function Manufacturers() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sort controls - more compact */}
|
||||
<div className="flex gap-2 w-full lg:w-auto">
|
||||
<Select value={sortBy} onValueChange={setSortBy}>
|
||||
<SelectTrigger className="w-[180px] h-10">
|
||||
<SelectTrigger className="w-[160px] 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>
|
||||
<SelectItem value="name">Name</SelectItem>
|
||||
<SelectItem value="founded">Founded</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* Mobile filter toggle */}
|
||||
<Button
|
||||
variant={showFilters ? "default" : "outline"}
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
@@ -195,15 +213,6 @@ export default function Manufacturers() {
|
||||
<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>
|
||||
|
||||
|
||||
@@ -219,6 +219,22 @@ const Operators = () => {
|
||||
{/* Search and Filters */}
|
||||
<div className="mb-6 space-y-4">
|
||||
<div className="flex flex-col lg: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">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
|
||||
@@ -231,19 +247,21 @@ const Operators = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sort controls - more compact */}
|
||||
<div className="flex gap-2 w-full lg:w-auto">
|
||||
<Select value={sortBy} onValueChange={setSortBy}>
|
||||
<SelectTrigger className="w-[180px] h-10">
|
||||
<SelectTrigger className="w-[160px] h-10">
|
||||
<SelectValue placeholder="Sort by" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="name">Name</SelectItem>
|
||||
<SelectItem value="rating">Rating</SelectItem>
|
||||
<SelectItem value="founded">Founded Year</SelectItem>
|
||||
<SelectItem value="reviews">Review Count</SelectItem>
|
||||
<SelectItem value="founded">Founded</SelectItem>
|
||||
<SelectItem value="reviews">Reviews</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* Mobile filter toggle */}
|
||||
<Button
|
||||
variant={showFilters ? "default" : "outline"}
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
@@ -253,15 +271,6 @@ const Operators = () => {
|
||||
<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>
|
||||
|
||||
|
||||
@@ -406,6 +406,27 @@ export default function Parks() {
|
||||
{/* Search and Controls */}
|
||||
<div className="mb-6 space-y-4">
|
||||
<div className="flex flex-col lg: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>
|
||||
{activeFilterCount > 0 && (
|
||||
<Badge variant="secondary" className="ml-1">
|
||||
{activeFilterCount}
|
||||
</Badge>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{/* Search bar takes remaining space */}
|
||||
<div className="flex-1">
|
||||
<ParkSearch
|
||||
value={filters.search}
|
||||
@@ -413,12 +434,14 @@ export default function Parks() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 flex-1">
|
||||
{/* Sort controls - more compact */}
|
||||
<div className="flex gap-2">
|
||||
<ParkSortOptions
|
||||
sort={sort}
|
||||
onSortChange={setSort}
|
||||
/>
|
||||
|
||||
{/* Mobile filter toggle */}
|
||||
<Button
|
||||
variant={showFilters ? "default" : "outline"}
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
@@ -434,20 +457,6 @@ export default function Parks() {
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
|
||||
className="shrink-0 gap-2 hidden lg:flex"
|
||||
title={sidebarCollapsed ? "Show filters" : "Hide filters"}
|
||||
>
|
||||
<PanelLeftClose className={`w-4 h-4 transition-transform ${sidebarCollapsed ? 'rotate-180' : ''}`} />
|
||||
{!sidebarCollapsed && activeFilterCount > 0 && (
|
||||
<Badge variant="secondary" className="ml-1">
|
||||
{activeFilterCount}
|
||||
</Badge>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Tabs value={viewMode} onValueChange={(v) => setViewMode(v as 'grid' | 'list')} className="hidden md:inline-flex">
|
||||
<TabsList>
|
||||
<TabsTrigger value="grid">
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user