feat: Enhance ride detail page with new sections

src/components/rides/FormerNames.tsx

@@ -0,0 +1,63 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { History } from 'lucide-react';
+
+interface FormerName {
+  name: string;
+  from_year?: number;
+  to_year?: number;
+}
+
+interface FormerNamesProps {
+  formerNames: FormerName[];
+  currentName: string;
+}
+
+export function FormerNames({ formerNames, currentName }: FormerNamesProps) {
+  if (!formerNames || formerNames.length === 0) {
+    return null;
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <History className="w-5 h-5" />
+          Ride History
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-3">
+          <div className="flex items-start gap-3">
+            <div className="flex-shrink-0 w-2 h-2 mt-2 rounded-full bg-primary" />
+            <div className="flex-1">
+              <div className="font-medium">{currentName}</div>
+              <div className="text-sm text-muted-foreground">Current name</div>
+            </div>
+            <Badge variant="default">Current</Badge>
+          </div>
+
+          {formerNames.map((former, index) => (
+            <div key={index} className="flex items-start gap-3">
+              <div className="flex-shrink-0 w-2 h-2 mt-2 rounded-full bg-muted-foreground" />
+              <div className="flex-1">
+                <div className="font-medium">{former.name}</div>
+                {(former.from_year || former.to_year) && (
+                  <div className="text-sm text-muted-foreground">
+                    {former.from_year && former.to_year 
+                      ? `${former.from_year} - ${former.to_year}`
+                      : former.from_year 
+                      ? `Since ${former.from_year}`
+                      : `Until ${former.to_year}`
+                    }
+                  </div>
+                )}
+              </div>
+              <Badge variant="outline">Former</Badge>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}