Add park listing page

src/components/parks/ParkSearch.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import { Search, X } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+
+interface ParkSearchProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}
+
+export function ParkSearch({ 
+  value, 
+  onChange, 
+  placeholder = "Search parks, locations, descriptions..." 
+}: ParkSearchProps) {
+  return (
+    <div className="relative">
+      <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+      <Input
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="pl-10 pr-10 bg-muted/50 border-border/50 focus:border-primary/50 transition-colors"
+      />
+      {value && (
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => onChange('')}
+          className="absolute right-1 top-1/2 transform -translate-y-1/2 h-8 w-8 p-0 hover:bg-muted"
+        >
+          <X className="w-3 h-3" />
+        </Button>
+      )}
+    </div>
+  );
+}