Refactor ride card park display

This commit is contained in:
gpt-engineer-app[bot]
2025-10-17 22:31:12 +00:00
parent 8f47dd899f
commit 77ede10999

View File

@@ -93,13 +93,14 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
</h3> </h3>
{showParkName && ride.park?.name && ( {showParkName && ride.park?.name && (
<div className="flex items-center gap-1 text-sm text-muted-foreground"> <Badge className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-background/80 backdrop-blur-md border-border/50 text-foreground shadow-lg shadow-primary/10 hover:shadow-xl hover:shadow-primary/20 hover:border-primary/50 transition-all duration-300 group/badge max-w-[200px]">
<MapPin className="w-3 h-3" /> <div className="w-5 h-5 rounded-full bg-gradient-to-br from-primary to-primary/50 flex items-center justify-center shadow-sm group-hover/badge:scale-110 transition-transform">
<span className="truncate"> <MapPin className="w-3 h-3 text-primary-foreground" />
{ride.park.name}
{ride.park.location?.city && `, ${ride.park.location.city}`}
</span>
</div> </div>
<span className="font-medium truncate">
{ride.park.name}
</span>
</Badge>
)} )}
</div> </div>