From baa29dc5d2f6175be586ebf47af6f4a05add8f50 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 28 Sep 2025 22:57:53 +0000
Subject: [PATCH] Fix unit conversion for imperial

---
 src/pages/Rides.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/pages/Rides.tsx b/src/pages/Rides.tsx
index bc06a04b..1dc35ef1 100644
--- a/src/pages/Rides.tsx
+++ b/src/pages/Rides.tsx
@@ -6,6 +6,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Badge } from '@/components/ui/badge';
 import { Filter, SlidersHorizontal, Zap, Clock, Star } from 'lucide-react';
 import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
+import { MeasurementDisplay } from '@/components/ui/measurement-display';
 import { Ride } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 import { useNavigate } from 'react-router-dom';
@@ -283,12 +284,16 @@ export default function Rides() {
                         {ride.max_speed_kmh && (
                           <div className="flex items-center gap-1">
                             <Zap className="w-3 h-3 text-primary" />
-                            <span className="text-primary font-medium text-xs">{ride.max_speed_kmh}km/h</span>
+                            <span className="text-primary font-medium text-xs">
+                              <MeasurementDisplay value={ride.max_speed_kmh} type="speed" />
+                            </span>
                           </div>
                         )}
                         {ride.max_height_meters && (
                           <div className="flex items-center gap-1">
-                            <span className="text-accent font-medium text-xs">{ride.max_height_meters}m</span>
+                            <span className="text-accent font-medium text-xs">
+                              <MeasurementDisplay value={ride.max_height_meters} type="distance" />
+                            </span>
                           </div>
                         )}
                         {ride.duration_seconds && (
@@ -311,6 +316,7 @@ export default function Rides() {
                     <Button 
                       className="w-full mt-3 bg-gradient-to-r from-primary/80 to-secondary/80 hover:from-primary hover:to-secondary transition-all duration-300"
                       size="sm"
+                      onClick={() => navigate(`/parks/${ride.park?.slug}/rides/${ride.slug}`)}
                     >
                       View Details
                     </Button>