Refactor: Implement Phase 3A technical data migration

src/components/rides/TechnicalSpecifications.tsx

@@ -0,0 +1,61 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { RideTechnicalSpec } from "@/types/database";
+import { Wrench } from "lucide-react";
+
+interface TechnicalSpecificationsProps {
+  specifications?: RideTechnicalSpec[];
+}
+
+export const TechnicalSpecifications = ({ specifications }: TechnicalSpecificationsProps) => {
+  if (!specifications || specifications.length === 0) {
+    return null;
+  }
+
+  // Group specs by category
+  const groupedSpecs = specifications.reduce((acc, spec) => {
+    const category = spec.category || 'General';
+    if (!acc[category]) {
+      acc[category] = [];
+    }
+    acc[category].push(spec);
+    return acc;
+  }, {} as Record<string, RideTechnicalSpec[]>);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Wrench className="h-5 w-5" />
+          Technical Specifications
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-6">
+          {Object.entries(groupedSpecs).map(([category, specs]) => (
+            <div key={category}>
+              <h3 className="text-sm font-semibold mb-3 text-muted-foreground uppercase tracking-wide">
+                {category}
+              </h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                {specs
+                  .sort((a, b) => a.display_order - b.display_order)
+                  .map((spec) => (
+                    <div
+                      key={spec.id}
+                      className="flex justify-between items-center p-3 rounded-lg bg-muted/50"
+                    >
+                      <span className="text-sm font-medium">{spec.spec_name}</span>
+                      <span className="text-sm text-muted-foreground">
+                        {spec.spec_value}
+                        {spec.unit && ` ${spec.unit}`}
+                      </span>
+                    </div>
+                  ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};