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

Refactor: Implement sleek cleanup plan

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-17 22:39:25 +00:00
parent 8f9c97737c
commit aaee8147e4
1 changed files with 26 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -100,81 +100,64 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
</Badge>
</div>
<CardContent className="p-3 space-y-2 border-t border-border/30">
<CardContent className="p-2.5 space-y-1.5 border-t border-border/30">
{/* Header */}
<div className="space-y-1">
<div className="space-y-0.5">
<h3 className="font-bold text-base group-hover:text-primary transition-colors line-clamp-2 group-hover:drop-shadow-[0_0_8px_rgba(var(--primary),0.5)] transition-all duration-300">
{ride.name}
</h3>
{showParkName && ride.park?.name && (
<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]">
<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">
<MapPin className="w-3 h-3 text-primary-foreground" />
<Badge className="inline-flex items-center gap-1.5 px-2.5 py-1 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]">
<div className="w-4 h-4 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">
<MapPin className="w-2.5 h-2.5 text-primary-foreground" />
</div>
<span className="font-medium truncate">
<span className="font-medium truncate text-xs">
{ride.park.name}
</span>
</Badge>
)}
</div>
{/* Category Badge */}
<div className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-background/60 backdrop-blur-sm border border-border/40 text-xs font-medium shadow-sm">
<div className="w-4 h-4 text-primary/80">
{getRideIcon(ride.category)}
</div>
<span className="text-muted-foreground">
{formatCategory(ride.category)}
</span>
</div>
{/* Stats */}
<div className="flex flex-col gap-2">
{/* Stats Row - Conditional spacing based on rating existence */}
{/* Stats & Rating */}
<div className="flex flex-col gap-1.5">
{/* Stats Row */}
{(Number(ride.max_speed_kmh) > 0 || Number(ride.max_height_meters) > 0 || Number(ride.duration_seconds) > 0) && (
<div className={`flex items-center ${ride.average_rating > 0 ? 'gap-2' : 'gap-4'} flex-wrap text-sm`}>
<div className="flex items-center gap-3 flex-wrap text-sm">
{Number(ride.max_speed_kmh) > 0 && (
<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">
<div className="flex items-center gap-1 min-w-0">
<Zap className="w-4 h-4 text-primary/70 flex-shrink-0" />
<span className="font-medium whitespace-nowrap">
<MeasurementDisplay value={ride.max_speed_kmh} type="speed" />
</span>
</div>
)}
{Number(ride.max_height_meters) > 0 && (
<div className="flex items-center gap-1.5 min-w-0">
<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" />
</div>
<span className="text-accent font-semibold whitespace-nowrap">
<div className="flex items-center gap-1 min-w-0">
<ArrowUp className="w-4 h-4 text-accent/70 flex-shrink-0" />
<span className="font-medium whitespace-nowrap">
<MeasurementDisplay value={ride.max_height_meters} type="distance" />
</span>
</div>
)}
{Number(ride.duration_seconds) > 0 && (
<div className="flex items-center gap-1.5 min-w-0">
<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" />
</div>
<span className="text-secondary font-semibold whitespace-nowrap">{Math.floor(ride.duration_seconds / 60)}</span>
<span className="text-muted-foreground text-xs font-normal">min</span>
<div className="flex items-center gap-1 min-w-0">
<Clock className="w-4 h-4 text-secondary/70 flex-shrink-0" />
<span className="font-medium whitespace-nowrap">
{Math.floor(ride.duration_seconds / 60)}<span className="text-muted-foreground text-xs ml-0.5">min</span>
</span>
</div>
)}
</div>
)}
{/* Rating Row - Separate when rating exists */}
{/* Rating */}
{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 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">
<Star className="w-3 h-3 fill-white text-white" />
</div>
<span className="text-sm font-semibold text-foreground">{ride.average_rating.toFixed(1)}</span>
<div className="inline-flex items-center gap-1 text-sm">
<Star className="w-4 h-4 fill-yellow-500 text-yellow-500" />
<span className="font-semibold text-foreground">{ride.average_rating.toFixed(1)}</span>
{ride.review_count > 0 && (
<span className="text-xs text-muted-foreground font-normal">({ride.review_count})</span>
<span className="text-muted-foreground">({ride.review_count})</span>
)}
</div>
)}