Refactor code structure and remove redundant changes

src-old/components/rides/RideHighlights.tsx

@@ -0,0 +1,86 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Zap, TrendingUp, Award, Sparkles } from 'lucide-react';
+import { MeasurementDisplay } from '@/components/ui/measurement-display';
+
+interface RideHighlight {
+  icon: React.ReactNode;
+  label: string;
+  value: React.ReactNode;
+}
+
+interface RideWithStats {
+  id: string;
+  name: string;
+  max_speed_kmh?: number;
+  max_height_meters?: number;
+  inversions?: number;
+  average_rating?: number;
+}
+
+interface RideHighlightsProps {
+  ride: RideWithStats;
+}
+
+export function RideHighlights({ ride }: RideHighlightsProps) {
+  const highlights: RideHighlight[] = [];
+
+  // Add speed highlight if notable
+  if (ride.max_speed_kmh && ride.max_speed_kmh > 60) {
+    highlights.push({
+      icon: <Zap className="w-5 h-5 text-amber-500" />,
+      label: 'High Speed',
+      value: <MeasurementDisplay value={ride.max_speed_kmh} type="speed" className="inline" />
+    });
+  }
+
+  // Add height highlight if notable
+  if (ride.max_height_meters && ride.max_height_meters > 30) {
+    highlights.push({
+      icon: <TrendingUp className="w-5 h-5 text-blue-500" />,
+      label: 'Tall Structure',
+      value: <MeasurementDisplay value={ride.max_height_meters} type="height" className="inline" />
+    });
+  }
+
+  // Add inversions highlight
+  if (ride.inversions && ride.inversions > 0) {
+    highlights.push({
+      icon: <Sparkles className="w-5 h-5 text-purple-500" />,
+      label: 'Inversions',
+      value: `${ride.inversions} ${ride.inversions === 1 ? 'inversion' : 'inversions'}`
+    });
+  }
+
+  // Add rating highlight if high
+  if (ride.average_rating && ride.average_rating >= 4.0) {
+    highlights.push({
+      icon: <Award className="w-5 h-5 text-yellow-500" />,
+      label: 'Highly Rated',
+      value: `${ride.average_rating.toFixed(1)} stars`
+    });
+  }
+
+  if (highlights.length === 0) {
+    return null;
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Ride Highlights</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          {highlights.map((highlight, index) => (
+            <div key={index} className="flex flex-col items-center text-center p-4 rounded-lg bg-accent/50">
+              <div className="mb-2">{highlight.icon}</div>
+              <div className="font-medium text-sm mb-1">{highlight.label}</div>
+              <div className="text-xs text-muted-foreground">{highlight.value}</div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}