From 48693c2f58f71415d3884ad9a11b6e70ea2dd3be Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Wed, 15 Oct 2025 19:50:30 +0000
Subject: [PATCH] Fix: Hide zero ride counts

---
 src/pages/ParkDetail.tsx | 60 +++++++++++++++++++++-------------------
 1 file changed, 32 insertions(+), 28 deletions(-)

diff --git a/src/pages/ParkDetail.tsx b/src/pages/ParkDetail.tsx
index 3dbcaded..26b2d28c 100644
--- a/src/pages/ParkDetail.tsx
+++ b/src/pages/ParkDetail.tsx
@@ -397,7 +397,9 @@ export default function ParkDetail() {
         <Tabs defaultValue="overview" className="w-full">
           <TabsList className="grid w-full grid-cols-2 md:grid-cols-5">
             <TabsTrigger value="overview">Overview</TabsTrigger>
-            <TabsTrigger value="rides">Rides ({rides.length})</TabsTrigger>
+            <TabsTrigger value="rides">
+              Rides {rides.length > 0 && `(${rides.length})`}
+            </TabsTrigger>
             <TabsTrigger value="reviews">
               Reviews {park.review_count > 0 && `(${park.review_count})`}
             </TabsTrigger>
@@ -423,34 +425,36 @@ export default function ParkDetail() {
                   </Card>}
 
                 {/* Featured Rides */}
-                <Card>
-                  <CardHeader>
-                    <CardTitle>Featured Rides</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 lg:gap-5 xl:gap-4">
-                      {rides.slice(0, 4).map(ride => (
-                        <RideCard 
-                          key={ride.id} 
-                          ride={ride} 
-                          showParkName={false}
-                          parkSlug={park.slug}
-                          className="h-full"
-                        />
-                      ))}
-                    </div>
-                    {rides.length > 4 && (
-                      <div className="mt-4 text-center">
-                        <Button 
-                          variant="outline" 
-                          onClick={() => navigate(`/parks/${park.slug}/rides/`)}
-                        >
-                          View All {park.ride_count} Rides
-                        </Button>
+                {rides.length > 0 && (
+                  <Card>
+                    <CardHeader>
+                      <CardTitle>Featured Rides</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 lg:gap-5 xl:gap-4">
+                        {rides.slice(0, 4).map(ride => (
+                          <RideCard 
+                            key={ride.id} 
+                            ride={ride} 
+                            showParkName={false}
+                            parkSlug={park.slug}
+                            className="h-full"
+                          />
+                        ))}
                       </div>
-                    )}
-                  </CardContent>
-                </Card>
+                      {rides.length > 4 && (
+                        <div className="mt-4 text-center">
+                          <Button 
+                            variant="outline" 
+                            onClick={() => navigate(`/parks/${park.slug}/rides/`)}
+                          >
+                            View All {park.ride_count} Rides
+                          </Button>
+                        </div>
+                      )}
+                    </CardContent>
+                  </Card>
+                )}
               </div>
 
               <div className="space-y-6">