From 99aa807338e730ca46f75dcf41d66a9978bbe1b8 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 23:01:04 +0000
Subject: [PATCH] Refactor unit conversion usage

---
 src/components/homepage/ContentTabs.tsx | 11 +++++++----
 src/pages/RideDetail.tsx                | 20 +++++++++++++++-----
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/components/homepage/ContentTabs.tsx b/src/components/homepage/ContentTabs.tsx
index 90f8ffb9..3be4a9a7 100644
--- a/src/components/homepage/ContentTabs.tsx
+++ b/src/components/homepage/ContentTabs.tsx
@@ -5,6 +5,7 @@ import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Star, TrendingUp, Plus, MapPin, Clock, Zap } from 'lucide-react';
+import { MeasurementDisplay } from '@/components/ui/measurement-display';
 import { Park, Ride } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 
@@ -172,14 +173,16 @@ export function ContentTabs() {
               {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">{ride.max_speed_kmh}</span>
-                  <span className="text-muted-foreground text-xs">km/h</span>
+                  <span className="text-primary font-medium">
+                    <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">{ride.max_height_meters}</span>
-                  <span className="text-muted-foreground text-xs">m</span>
+                  <span className="text-accent font-medium">
+                    <MeasurementDisplay value={ride.max_height_meters} type="distance" />
+                  </span>
                 </div>
               )}
               {ride.duration_seconds && (
diff --git a/src/pages/RideDetail.tsx b/src/pages/RideDetail.tsx
index e0d67c0c..9415473d 100644
--- a/src/pages/RideDetail.tsx
+++ b/src/pages/RideDetail.tsx
@@ -468,19 +468,25 @@ export default function RideDetail() {
                   {ride.max_speed_kmh && (
                     <div className="flex justify-between">
                       <span>Maximum Speed</span>
-                      <span className="font-medium">{ride.max_speed_kmh} km/h</span>
+                      <span className="font-medium">
+                        <MeasurementDisplay value={ride.max_speed_kmh} type="speed" />
+                      </span>
                     </div>
                   )}
                   {ride.max_height_meters && (
                     <div className="flex justify-between">
                       <span>Maximum Height</span>
-                      <span className="font-medium">{ride.max_height_meters}m</span>
+                      <span className="font-medium">
+                        <MeasurementDisplay value={ride.max_height_meters} type="distance" />
+                      </span>
                     </div>
                   )}
                   {ride.length_meters && (
                     <div className="flex justify-between">
                       <span>Track Length</span>
-                      <span className="font-medium">{Math.round(ride.length_meters)}m</span>
+                      <span className="font-medium">
+                        <MeasurementDisplay value={ride.length_meters} type="distance" />
+                      </span>
                     </div>
                   )}
                   {ride.duration_seconds && (
@@ -498,7 +504,9 @@ export default function RideDetail() {
                   {ride.drop_height_meters && (
                     <div className="flex justify-between">
                       <span>Drop Height</span>
-                      <span className="font-medium">{ride.drop_height_meters}m</span>
+                      <span className="font-medium">
+                        <MeasurementDisplay value={ride.drop_height_meters} type="distance" />
+                      </span>
                     </div>
                   )}
                   {ride.max_g_force && (
@@ -525,7 +533,9 @@ export default function RideDetail() {
                   {ride.height_requirement && (
                     <div className="flex justify-between">
                       <span>Height Requirement</span>
-                      <span className="font-medium">{ride.height_requirement}cm minimum</span>
+                      <span className="font-medium">
+                        <MeasurementDisplay value={ride.height_requirement} type="height" /> minimum
+                      </span>
                     </div>
                   )}
                   {ride.age_requirement && (