Refactor: Improve Rides tab UI

src/pages/ParkDetail.tsx

@@ -6,7 +6,9 @@ import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Separator } from '@/components/ui/separator';
-import { MapPin, Star, Clock, Phone, Globe, Calendar, ArrowLeft, Users, Zap, Camera, Castle, FerrisWheel, Waves, Tent } from 'lucide-react';
+import { MapPin, Star, Clock, Phone, Globe, Calendar, ArrowLeft, Users, Zap, Camera, Castle, FerrisWheel, Waves, Tent, Plus } from 'lucide-react';
+import { useAuth } from '@/hooks/useAuth';
+import { useUserRole } from '@/hooks/useUserRole';
 import { ReviewsSection } from '@/components/reviews/ReviewsSection';
 import { RideCard } from '@/components/rides/RideCard';
 import { Park, Ride } from '@/types/database';
@@ -20,6 +22,8 @@ export default function ParkDetail() {
     slug: string;
   }>();
   const navigate = useNavigate();
+  const { user } = useAuth();
+  const { isModerator, isAdmin } = useUserRole();
   const [park, setPark] = useState<Park | null>(null);
   const [rides, setRides] = useState<Ride[]>([]);
   const [loading, setLoading] = useState(true);
@@ -409,15 +413,39 @@ export default function ParkDetail() {
           </TabsContent>
 
           <TabsContent value="rides" className="mt-6">
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-              {rides.map(ride => (
-                <RideCard 
-                  key={ride.id} 
-                  ride={ride} 
-                  showParkName={false}
-                />
-              ))}
+            {/* Header with Add Ride button */}
+            <div className="flex items-center justify-between mb-6">
+              <h2 className="text-2xl font-bold">Rides at {park.name}</h2>
+              {user && (isModerator() || isAdmin()) && (
+                <Button onClick={() => navigate(`/parks/${park.slug}/rides/new`)}>
+                  <Plus className="w-4 h-4 mr-2" />
+                  Add Ride
+                </Button>
+              )}
             </div>
+            
+            {/* Conditional rendering */}
+            {rides.length === 0 ? (
+              <Card className="border-dashed bg-muted/50">
+                <CardContent className="p-12 text-center">
+                  <FerrisWheel className="w-16 h-16 mx-auto mb-4 text-muted-foreground/40" />
+                  <h3 className="text-xl font-semibold mb-2">No rides yet</h3>
+                  <p className="text-muted-foreground">
+                    Be the first to add a ride to this park
+                  </p>
+                </CardContent>
+              </Card>
+            ) : (
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                {rides.map(ride => (
+                  <RideCard 
+                    key={ride.id} 
+                    ride={ride} 
+                    showParkName={false}
+                  />
+                ))}
+              </div>
+            )}
           </TabsContent>
 
           <TabsContent value="reviews" className="mt-6">