Fix: Link park and ride cards

This commit is contained in:
gpt-engineer-app[bot]
2025-09-29 12:58:33 +00:00
parent af85276ebf
commit 0f476db478

View File

@@ -1,4 +1,5 @@
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { ParkCard } from '@/components/parks/ParkCard';
import { Card, CardContent } from '@/components/ui/card';
@@ -10,6 +11,7 @@ import { Park, Ride } from '@/types/database';
import { supabase } from '@/integrations/supabase/client';
export function ContentTabs() {
const navigate = useNavigate();
const [popularParks, setPopularParks] = useState<Park[]>([]);
const [trendingParks, setTrendingParks] = useState<Park[]>([]);
const [popularRides, setPopularRides] = useState<Ride[]>([]);
@@ -109,6 +111,7 @@ export function ContentTabs() {
const RideCard = ({ ride }: { ride: Ride }) => (
<Card
className="group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 cursor-pointer hover:scale-[1.02]"
onClick={() => navigate(`/parks/${ride.park?.slug}/rides/${ride.slug}`)}
>
<div className="relative overflow-hidden">
{/* Image/Icon Section */}
@@ -266,7 +269,7 @@ export function ContentTabs() {
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6">
{popularParks.map((park) => (
<ParkCard key={park.id} park={park} />
<ParkCard key={park.id} park={park} onClick={() => navigate(`/parks/${park.slug}`)} />
))}
</div>
</TabsContent>
@@ -278,7 +281,7 @@ export function ContentTabs() {
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6">
{trendingParks.map((park) => (
<ParkCard key={park.id} park={park} />
<ParkCard key={park.id} park={park} onClick={() => navigate(`/parks/${park.slug}`)} />
))}
</div>
</TabsContent>
@@ -314,7 +317,7 @@ export function ContentTabs() {
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6">
{recentParks.map((park) => (
<ParkCard key={park.id} park={park} />
<ParkCard key={park.id} park={park} onClick={() => navigate(`/parks/${park.slug}`)} />
))}
</div>
</TabsContent>