pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-20 10:11:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Resolve overlapping elements in RideCard

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-17 22:36:45 +00:00
parent 2099972ac1
commit 8f9c97737c
1 changed files with 34 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/rides/RideCard.tsx
View File

@@ -130,41 +130,45 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
</div> </div>
{/* Stats */} {/* Stats */}
<div className="flex items-center justify-between text-sm"> <div className="flex flex-col gap-2">
<div className="flex items-center gap-4"> {/* Stats Row - Conditional spacing based on rating existence */}
{Number(ride.max_speed_kmh) > 0 && ( {(Number(ride.max_speed_kmh) > 0 || Number(ride.max_height_meters) > 0 || Number(ride.duration_seconds) > 0) && (
<div className="flex items-center gap-1.5"> <div className={`flex items-center ${ride.average_rating > 0 ? 'gap-2' : 'gap-4'} flex-wrap text-sm`}>
<div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center"> {Number(ride.max_speed_kmh) > 0 && (
<Zap className="w-3.5 h-3.5 text-primary" /> <div className="flex items-center gap-1.5 min-w-0">
<div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
<Zap className="w-3.5 h-3.5 text-primary" />
</div>
<span className="text-primary font-semibold whitespace-nowrap">
<MeasurementDisplay value={ride.max_speed_kmh} type="speed" />
</span>
</div> </div>
<span className="text-primary font-semibold"> )}
<MeasurementDisplay value={ride.max_speed_kmh} type="speed" /> {Number(ride.max_height_meters) > 0 && (
</span> <div className="flex items-center gap-1.5 min-w-0">
</div> <div className="w-6 h-6 rounded-full bg-accent/10 flex items-center justify-center flex-shrink-0">
)} <ArrowUp className="w-3.5 h-3.5 text-accent" />
{Number(ride.max_height_meters) > 0 && ( </div>
<div className="flex items-center gap-1.5"> <span className="text-accent font-semibold whitespace-nowrap">
<div className="w-6 h-6 rounded-full bg-accent/10 flex items-center justify-center"> <MeasurementDisplay value={ride.max_height_meters} type="distance" />
<ArrowUp className="w-3.5 h-3.5 text-accent" /> </span>
</div> </div>
<span className="text-accent font-semibold"> )}
<MeasurementDisplay value={ride.max_height_meters} type="distance" /> {Number(ride.duration_seconds) > 0 && (
</span> <div className="flex items-center gap-1.5 min-w-0">
</div> <div className="w-6 h-6 rounded-full bg-secondary/10 flex items-center justify-center flex-shrink-0">
)} <Clock className="w-3.5 h-3.5 text-secondary" />
{Number(ride.duration_seconds) > 0 && ( </div>
<div className="flex items-center gap-1.5"> <span className="text-secondary font-semibold whitespace-nowrap">{Math.floor(ride.duration_seconds / 60)}</span>
<div className="w-6 h-6 rounded-full bg-secondary/10 flex items-center justify-center"> <span className="text-muted-foreground text-xs font-normal">min</span>
<Clock className="w-3.5 h-3.5 text-secondary" />
</div> </div>
<span className="text-secondary font-semibold">{Math.floor(ride.duration_seconds / 60)}</span> )}
<span className="text-muted-foreground text-xs font-normal">min</span> </div>
</div> )}
)}
</div>
{/* Rating Row - Separate when rating exists */}
{ride.average_rating > 0 && ( {ride.average_rating > 0 && (
<div className="flex items-center gap-1.5 px-2 py-1 rounded-full bg-yellow-500/10 border border-yellow-500/20"> <div className="flex items-center gap-1.5 px-2 py-1 rounded-full bg-yellow-500/10 border border-yellow-500/20 self-start">
<div className="w-5 h-5 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-500 flex items-center justify-center shadow-sm"> <div className="w-5 h-5 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-500 flex items-center justify-center shadow-sm">
<Star className="w-3 h-3 fill-white text-white" /> <Star className="w-3 h-3 fill-white text-white" />
</div> </div>