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

Refactor Park Detail Stats

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-29 13:04:48 +00:00
parent 606fee5a60
commit 4f8b6ae1a1
1 changed files with 27 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/pages/ParkDetail.tsx
View File

@@ -224,51 +224,51 @@ export default function ParkDetail() {
{/* Background decorative elements */}
<div className="absolute inset-0 bg-gradient-to-r from-primary/5 via-secondary/5 to-accent/5 rounded-3xl blur-xl"></div>
<div className="relative grid grid-cols-2 md:grid-cols-4 gap-6 p-6 bg-gradient-to-br from-background/80 via-card/90 to-background/80 backdrop-blur-sm rounded-2xl border border-border/50 shadow-lg">
<div className="relative grid grid-cols-2 md:grid-cols-4 gap-4 p-4 bg-gradient-to-br from-background/80 via-card/90 to-background/80 backdrop-blur-sm rounded-xl border border-border/50 shadow-md">
{/* Total Rides */}
<div className="group relative overflow-hidden">
<Card className="h-full border-0 bg-gradient-to-br from-primary/10 via-primary/5 to-transparent hover:shadow-xl hover:shadow-primary/20 transition-all duration-300 hover:scale-105">
<CardContent className="p-6 text-center relative">
<div className="absolute top-2 right-2 opacity-20 group-hover:opacity-40 transition-opacity">
<FerrisWheel className="w-8 h-8 text-primary" />
<Card className="h-full border-0 bg-gradient-to-br from-primary/10 via-primary/5 to-transparent hover:shadow-lg hover:shadow-primary/15 transition-all duration-300 hover:scale-[1.02]">
<CardContent className="p-4 text-center relative">
<div className="absolute top-1 right-1 opacity-20 group-hover:opacity-40 transition-opacity">
<FerrisWheel className="w-6 h-6 text-primary" />
</div>
<div className="text-3xl font-bold text-primary mb-2 group-hover:scale-110 transition-transform">
<div className="text-2xl font-bold text-primary mb-1 group-hover:scale-105 transition-transform">
{park.ride_count}
</div>
<div className="text-sm font-medium text-muted-foreground">Total Rides</div>
<div className="text-xs font-medium text-muted-foreground">Total Rides</div>
</CardContent>
</Card>
</div>
{/* Roller Coasters */}
<div className="group relative overflow-hidden">
<Card className="h-full border-0 bg-gradient-to-br from-accent/10 via-accent/5 to-transparent hover:shadow-xl hover:shadow-accent/20 transition-all duration-300 hover:scale-105">
<CardContent className="p-6 text-center relative">
<div className="absolute top-2 right-2 opacity-20 group-hover:opacity-40 transition-opacity">
<Zap className="w-8 h-8 text-accent" />
<Card className="h-full border-0 bg-gradient-to-br from-accent/10 via-accent/5 to-transparent hover:shadow-lg hover:shadow-accent/15 transition-all duration-300 hover:scale-[1.02]">
<CardContent className="p-4 text-center relative">
<div className="absolute top-1 right-1 opacity-20 group-hover:opacity-40 transition-opacity">
<Zap className="w-6 h-6 text-accent" />
</div>
<div className="text-3xl font-bold text-accent mb-2 group-hover:scale-110 transition-transform">
<div className="text-2xl font-bold text-accent mb-1 group-hover:scale-105 transition-transform">
{park.coaster_count}
</div>
<div className="text-sm font-medium text-muted-foreground">Roller Coasters</div>
<div className="text-xs font-medium text-muted-foreground">Roller Coasters</div>
</CardContent>
</Card>
</div>
{/* Reviews */}
<div className="group relative overflow-hidden">
<Card className="h-full border-0 bg-gradient-to-br from-secondary/10 via-secondary/5 to-transparent hover:shadow-xl hover:shadow-secondary/20 transition-all duration-300 hover:scale-105">
<CardContent className="p-6 text-center relative">
<div className="absolute top-2 right-2 opacity-20 group-hover:opacity-40 transition-opacity">
<Star className="w-8 h-8 text-secondary" />
<Card className="h-full border-0 bg-gradient-to-br from-secondary/10 via-secondary/5 to-transparent hover:shadow-lg hover:shadow-secondary/15 transition-all duration-300 hover:scale-[1.02]">
<CardContent className="p-4 text-center relative">
<div className="absolute top-1 right-1 opacity-20 group-hover:opacity-40 transition-opacity">
<Star className="w-6 h-6 text-secondary" />
</div>
<div className="text-3xl font-bold text-secondary mb-2 group-hover:scale-110 transition-transform">
<div className="text-2xl font-bold text-secondary mb-1 group-hover:scale-105 transition-transform">
{park.review_count}
</div>
<div className="text-sm font-medium text-muted-foreground">Reviews</div>
<div className="text-xs font-medium text-muted-foreground">Reviews</div>
{park.average_rating > 0 && (
<div className="flex items-center justify-center gap-1 mt-2">
<Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
<div className="flex items-center justify-center gap-1 mt-1">
<Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
<span className="text-xs font-medium text-yellow-500">
{park.average_rating.toFixed(1)}
</span>
@@ -280,15 +280,15 @@ export default function ParkDetail() {
{/* Park Type */}
<div className="group relative overflow-hidden">
<Card className="h-full border-0 bg-gradient-to-br from-muted/20 via-muted/10 to-transparent hover:shadow-xl hover:shadow-muted/20 transition-all duration-300 hover:scale-105">
<CardContent className="p-6 text-center relative">
<div className="flex items-center justify-center mb-3 group-hover:scale-110 transition-transform">
<div className="p-3 rounded-full bg-gradient-to-br from-primary/20 to-accent/20">
<Card className="h-full border-0 bg-gradient-to-br from-muted/20 via-muted/10 to-transparent hover:shadow-lg hover:shadow-muted/15 transition-all duration-300 hover:scale-[1.02]">
<CardContent className="p-4 text-center relative">
<div className="flex items-center justify-center mb-2 group-hover:scale-105 transition-transform">
<div className="p-2 rounded-full bg-gradient-to-br from-primary/20 to-accent/20">
{getParkTypeIcon(park.park_type)}
</div>
</div>
<div className="text-sm font-medium text-foreground">{formatParkType(park.park_type)}</div>
<div className="text-xs text-muted-foreground mt-1">Park Type</div>
<div className="text-xs font-medium text-foreground">{formatParkType(park.park_type)}</div>
<div className="text-xs text-muted-foreground mt-0.5">Park Type</div>
</CardContent>
</Card>
</div>