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

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> </Badge>
</div> </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 */} {/* 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"> <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} {ride.name}
</h3> </h3>
{showParkName && ride.park?.name && ( {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]"> <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-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"> <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-3 h-3 text-primary-foreground" /> <MapPin className="w-2.5 h-2.5 text-primary-foreground" />
</div> </div>
<span className="font-medium truncate"> <span className="font-medium truncate text-xs">
{ride.park.name} {ride.park.name}
</span> </span>
</Badge> </Badge>
)} )}
</div> </div>
{/* Category Badge */} {/* Stats & Rating */}
<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="flex flex-col gap-1.5">
<div className="w-4 h-4 text-primary/80"> {/* Stats Row */}
{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 */}
{(Number(ride.max_speed_kmh) > 0 || Number(ride.max_height_meters) > 0 || Number(ride.duration_seconds) > 0) && ( {(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 && ( {Number(ride.max_speed_kmh) > 0 && (
<div className="flex items-center gap-1.5 min-w-0"> <div className="flex items-center gap-1 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-4 h-4 text-primary/70 flex-shrink-0" />
<Zap className="w-3.5 h-3.5 text-primary" /> <span className="font-medium whitespace-nowrap">
</div>
<span className="text-primary font-semibold whitespace-nowrap">
<MeasurementDisplay value={ride.max_speed_kmh} type="speed" /> <MeasurementDisplay value={ride.max_speed_kmh} type="speed" />
</span> </span>
</div> </div>
)} )}
{Number(ride.max_height_meters) > 0 && ( {Number(ride.max_height_meters) > 0 && (
<div className="flex items-center gap-1.5 min-w-0"> <div className="flex items-center gap-1 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-4 h-4 text-accent/70 flex-shrink-0" />
<ArrowUp className="w-3.5 h-3.5 text-accent" /> <span className="font-medium whitespace-nowrap">
</div>
<span className="text-accent font-semibold whitespace-nowrap">
<MeasurementDisplay value={ride.max_height_meters} type="distance" /> <MeasurementDisplay value={ride.max_height_meters} type="distance" />
</span> </span>
</div> </div>
)} )}
{Number(ride.duration_seconds) > 0 && ( {Number(ride.duration_seconds) > 0 && (
<div className="flex items-center gap-1.5 min-w-0"> <div className="flex items-center gap-1 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-4 h-4 text-secondary/70 flex-shrink-0" />
<Clock className="w-3.5 h-3.5 text-secondary" /> <span className="font-medium whitespace-nowrap">
</div> {Math.floor(ride.duration_seconds / 60)}<span className="text-muted-foreground text-xs ml-0.5">min</span>
<span className="text-secondary font-semibold whitespace-nowrap">{Math.floor(ride.duration_seconds / 60)}</span> </span>
<span className="text-muted-foreground text-xs font-normal">min</span>
</div> </div>
)} )}
</div> </div>
)} )}
{/* Rating Row - Separate when rating exists */} {/* Rating */}
{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 self-start"> <div className="inline-flex items-center gap-1 text-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-4 h-4 fill-yellow-500 text-yellow-500" />
<Star className="w-3 h-3 fill-white text-white" /> <span className="font-semibold text-foreground">{ride.average_rating.toFixed(1)}</span>
</div>
<span className="text-sm font-semibold text-foreground">{ride.average_rating.toFixed(1)}</span>
{ride.review_count > 0 && ( {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> </div>
)} )}