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

Refactor: Enhance RideCard styling

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-17 22:34:23 +00:00
parent 77ede10999
commit 2099972ac1
1 changed files with 54 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { Card, CardContent } from '@/components/ui/card'; import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { Star, MapPin, Clock, Zap, FerrisWheel, Waves, Theater, Train } from 'lucide-react'; import { Star, MapPin, Clock, Zap, FerrisWheel, Waves, Theater, Train, ArrowUp, CheckCircle, Calendar, Hammer, XCircle } from 'lucide-react';
import { MeasurementDisplay } from '@/components/ui/measurement-display'; import { MeasurementDisplay } from '@/components/ui/measurement-display';
import { Ride } from '@/types/database'; import { Ride } from '@/types/database';
import { getCloudflareImageUrl } from '@/lib/cloudflareImageUtils'; import { getCloudflareImageUrl } from '@/lib/cloudflareImageUtils';
@@ -42,6 +42,15 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
} }
}; };
const getStatusIcon = (status: string) => {
switch (status) {
case 'operating': return <CheckCircle className="w-3 h-3" />;
case 'seasonal': return <Calendar className="w-3 h-3" />;
case 'under_construction': return <Hammer className="w-3 h-3" />;
default: return <XCircle className="w-3 h-3" />;
}
};
const formatCategory = (category: string) => { const formatCategory = (category: string) => {
return category.split('_').map(word => return category.split('_').map(word =>
word.charAt(0).toUpperCase() + word.slice(1) word.charAt(0).toUpperCase() + word.slice(1)
@@ -50,7 +59,7 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
return ( return (
<Card <Card
className={`group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 cursor-pointer hover:scale-[1.02] ${className}`} className={`group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-2xl hover:shadow-primary/20 hover:border-primary/30 transition-all duration-300 cursor-pointer hover:scale-[1.02] relative before:absolute before:inset-0 before:rounded-lg before:p-[1px] before:bg-gradient-to-br before:from-primary/20 before:via-transparent before:to-accent/20 before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300 ${className}`}
onClick={handleRideClick} onClick={handleRideClick}
> >
<div className="relative overflow-hidden"> <div className="relative overflow-hidden">
@@ -69,26 +78,32 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
loading="lazy" loading="lazy"
/> />
) : ( ) : (
<div className="flex items-center justify-center w-12 h-12 text-muted-foreground/30"> <div className="flex items-center justify-center w-20 h-20">
{getRideIcon(ride.category)} <div className="relative">
<div className="absolute inset-0 rounded-full bg-primary/20 blur-xl animate-pulse" />
<div className="relative w-12 h-12 rounded-full bg-gradient-to-br from-primary/30 to-secondary/30 flex items-center justify-center border border-primary/20">
{getRideIcon(ride.category)}
</div>
</div>
</div> </div>
)} )}
{/* Gradient Overlay */} {/* Gradient Overlay */}
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" /> <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-80 group-hover:opacity-60 transition-opacity duration-300" />
{/* Status Badge */} {/* Status Badge */}
<Badge <Badge
className={`absolute top-3 right-3 ${getStatusColor(ride.status)} border`} className={`absolute top-3 right-3 ${getStatusColor(ride.status)} backdrop-blur-sm border shadow-lg font-medium text-xs px-2.5 py-1 inline-flex items-center gap-1.5`}
> >
{ride.status.replace('_', ' ').toUpperCase()} {getStatusIcon(ride.status)}
<span>{ride.status.replace('_', ' ').toUpperCase()}</span>
</Badge> </Badge>
</div> </div>
<CardContent className="p-3 space-y-2"> <CardContent className="p-3 space-y-2 border-t border-border/30">
{/* Header */} {/* Header */}
<div className="space-y-1"> <div className="space-y-1">
<h3 className="font-bold text-base group-hover:text-primary transition-colors line-clamp-2"> <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>
@@ -105,43 +120,57 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
</div> </div>
{/* Category Badge */} {/* Category Badge */}
<Badge variant="outline" className="text-xs"> <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">
{formatCategory(ride.category)} <div className="w-4 h-4 text-primary/80">
</Badge> {getRideIcon(ride.category)}
</div>
<span className="text-muted-foreground">
{formatCategory(ride.category)}
</span>
</div>
{/* Stats */} {/* Stats */}
<div className="flex items-center justify-between text-sm"> <div className="flex items-center justify-between text-sm">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
{Number(ride.max_speed_kmh) > 0 && ( {Number(ride.max_speed_kmh) > 0 && (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1.5">
<Zap className="w-3 h-3 text-primary" /> <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center">
<span className="text-primary font-medium"> <Zap className="w-3.5 h-3.5 text-primary" />
</div>
<span className="text-primary font-semibold">
<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"> <div className="flex items-center gap-1.5">
<span className="text-accent font-medium"> <div className="w-6 h-6 rounded-full bg-accent/10 flex items-center justify-center">
<ArrowUp className="w-3.5 h-3.5 text-accent" />
</div>
<span className="text-accent font-semibold">
<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"> <div className="flex items-center gap-1.5">
<Clock className="w-3 h-3 text-secondary" /> <div className="w-6 h-6 rounded-full bg-secondary/10 flex items-center justify-center">
<span className="text-secondary font-medium">{Math.floor(ride.duration_seconds / 60)}</span> <Clock className="w-3.5 h-3.5 text-secondary" />
<span className="text-muted-foreground text-xs">min</span> </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> </div>
{ride.average_rating > 0 && ( {ride.average_rating > 0 && (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1.5 px-2 py-1 rounded-full bg-yellow-500/10 border border-yellow-500/20">
<Star className="w-3 h-3 fill-yellow-400 text-yellow-400" /> <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">
<span className="text-sm font-medium">{ride.average_rating.toFixed(1)}</span> <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>
{ride.review_count > 0 && ( {ride.review_count > 0 && (
<span className="text-xs text-muted-foreground">({ride.review_count})</span> <span className="text-xs text-muted-foreground font-normal">({ride.review_count})</span>
)} )}
</div> </div>
)} )}