Refactor: Reorganize filter and sort controls

This commit is contained in:
gpt-engineer-app[bot]
2025-10-28 15:49:41 +00:00
parent c48509efc4
commit 832f53a126
6 changed files with 119 additions and 73 deletions

View File

@@ -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>