Add park listing page

src/components/parks/ParkSortOptions.tsx

@@ -0,0 +1,61 @@
+import { SortAsc, SortDesc, ArrowUpDown } from 'lucide-react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Button } from '@/components/ui/button';
+import { SortState } from '@/pages/Parks';
+
+interface ParkSortOptionsProps {
+  sort: SortState;
+  onSortChange: (sort: SortState) => void;
+}
+
+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' },
+  ];
+
+  const toggleDirection = () => {
+    onSortChange({
+      ...sort,
+      direction: sort.direction === 'asc' ? 'desc' : 'asc'
+    });
+  };
+
+  return (
+    <div className="flex gap-2">
+      <Select 
+        value={sort.field} 
+        onValueChange={(field) => onSortChange({ ...sort, field })}
+      >
+        <SelectTrigger className="w-48 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}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      <Button
+        variant="outline"
+        size="icon"
+        onClick={toggleDirection}
+        className="shrink-0 bg-muted/50 border-border/50"
+      >
+        {sort.direction === 'asc' ? (
+          <SortAsc className="w-4 h-4" />
+        ) : (
+          <SortDesc className="w-4 h-4" />
+        )}
+      </Button>
+    </div>
+  );
+}