mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-24 09:31:12 -05:00
Refactor: Enhance Park List View
This commit is contained in:
gpt-engineer-app[bot]
@@ -1,8 +1,9 @@
|
||||
import { MapPin, Star, Users, Calendar, ExternalLink, Castle, FerrisWheel, Waves, Tent } from 'lucide-react';
|
||||
import { MapPin, Star, Users, Calendar, ExternalLink, Castle, FerrisWheel, Waves, Tent, Sparkles } from 'lucide-react';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Park } from '@/types/database';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface ParkListViewProps {
|
||||
parks: Park[];
|
||||
@@ -36,86 +37,103 @@ export function ParkListView({ parks, onParkClick }: ParkListViewProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{parks.map((park) => (
|
||||
<div className="space-y-3">
|
||||
{parks.map((park, index) => (
|
||||
<Card
|
||||
key={park.id}
|
||||
className="group overflow-hidden border-border/50 bg-gradient-to-r from-card via-card to-card/80 hover:shadow-lg hover:shadow-primary/10 transition-all duration-300 cursor-pointer"
|
||||
className={cn(
|
||||
"group overflow-hidden cursor-pointer",
|
||||
"border-border/40 bg-gradient-to-br from-card via-card/95 to-card/90",
|
||||
"hover:border-primary/30 hover:shadow-2xl hover:shadow-primary/5",
|
||||
"transition-all duration-500 animate-fade-in-up"
|
||||
)}
|
||||
style={{ animationDelay: `${index * 50}ms` }}
|
||||
onClick={() => onParkClick(park)}
|
||||
>
|
||||
<CardContent className="p-0">
|
||||
<div className="flex">
|
||||
<div className="flex flex-col sm:flex-row">
|
||||
{/* Image */}
|
||||
<div className="w-32 h-32 md:w-48 md:h-32 flex-shrink-0 relative overflow-hidden">
|
||||
<div className="w-full sm:w-40 h-40 md:w-48 md:h-40 flex-shrink-0 relative overflow-hidden">
|
||||
{park.card_image_url ? (
|
||||
<img
|
||||
src={park.card_image_url}
|
||||
alt={park.name}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<>
|
||||
<img
|
||||
src={park.card_image_url}
|
||||
alt={park.name}
|
||||
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
</>
|
||||
) : (
|
||||
<div className="w-full h-full bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center">
|
||||
<span className="opacity-50">
|
||||
<div className="w-full h-full bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative overflow-hidden">
|
||||
<span className="opacity-50 z-10 relative">
|
||||
{getParkTypeIcon(park.park_type)}
|
||||
</span>
|
||||
<div className="absolute inset-0 bg-gradient-to-tr from-primary/10 to-transparent group-hover:scale-110 transition-transform duration-700" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Status Badge */}
|
||||
<Badge
|
||||
className={`absolute top-2 left-2 text-xs ${getStatusColor(park.status)} border`}
|
||||
className={cn(
|
||||
"absolute top-2 left-2 text-xs border backdrop-blur-sm",
|
||||
getStatusColor(park.status)
|
||||
)}
|
||||
>
|
||||
{park.status.replace('_', ' ').toUpperCase()}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 p-4 md:p-6 flex flex-col justify-between min-h-[128px]">
|
||||
<div className="space-y-2">
|
||||
<div className="flex-1 p-4 md:p-6 flex flex-col justify-between min-h-[160px]">
|
||||
<div className="space-y-3">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1.5">
|
||||
<h3 className="font-bold text-lg md:text-xl group-hover:text-primary transition-colors duration-300 line-clamp-1">
|
||||
{park.name}
|
||||
</h3>
|
||||
{getParkTypeIcon(park.park_type)}
|
||||
<span className="text-muted-foreground group-hover:text-primary transition-colors duration-300 flex-shrink-0">
|
||||
{getParkTypeIcon(park.park_type)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{park.location && (
|
||||
<div className="flex items-center text-sm text-muted-foreground">
|
||||
<MapPin className="w-3 h-3 mr-1" />
|
||||
{park.location.city && `${park.location.city}, `}
|
||||
{park.location.state_province && `${park.location.state_province}, `}
|
||||
{park.location.country}
|
||||
<div className="flex items-center text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<MapPin className="w-3.5 h-3.5 mr-1.5 flex-shrink-0" />
|
||||
<span className="line-clamp-1">
|
||||
{park.location.city && `${park.location.city}, `}
|
||||
{park.location.state_province && `${park.location.state_province}, `}
|
||||
{park.location.country}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Rating */}
|
||||
{park.average_rating > 0 && (
|
||||
<div className="flex items-center gap-1 ml-4">
|
||||
<div className="flex items-center gap-1.5 ml-4 flex-shrink-0 bg-yellow-400/10 px-3 py-1.5 rounded-full group-hover:bg-yellow-400/20 transition-colors duration-300">
|
||||
<Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
|
||||
<span className="font-medium">{park.average_rating.toFixed(1)}</span>
|
||||
<span className="text-sm text-muted-foreground">({park.review_count})</span>
|
||||
<span className="font-semibold text-foreground">{park.average_rating.toFixed(1)}</span>
|
||||
<span className="text-xs text-muted-foreground">({park.review_count})</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
{park.description && (
|
||||
<p className="text-sm text-muted-foreground line-clamp-2">
|
||||
<p className="text-sm text-muted-foreground group-hover:text-foreground/80 transition-colors duration-300 line-clamp-2">
|
||||
{park.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Tags */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="text-xs">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Badge variant="outline" className="text-xs backdrop-blur-sm border-primary/20 group-hover:border-primary/40 transition-colors duration-300">
|
||||
{formatParkType(park.park_type)}
|
||||
</Badge>
|
||||
{park.opening_date && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
<Badge variant="outline" className="text-xs backdrop-blur-sm border-accent/20 group-hover:border-accent/40 transition-colors duration-300">
|
||||
<Calendar className="w-3 h-3 mr-1" />
|
||||
Opened {park.opening_date.split('-')[0]}
|
||||
</Badge>
|
||||
@@ -124,30 +142,33 @@ export function ParkListView({ parks, onParkClick }: ParkListViewProps) {
|
||||
</div>
|
||||
|
||||
{/* Stats and Actions */}
|
||||
<div className="flex items-center justify-between mt-4">
|
||||
<div className="flex items-center gap-6 text-sm">
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-primary font-medium">{park.ride_count || 0}</span>
|
||||
<span className="text-muted-foreground">rides</span>
|
||||
<div className="flex items-center justify-between mt-4 pt-3 border-t border-border/50">
|
||||
<div className="flex items-center gap-4 md:gap-6 text-sm flex-wrap">
|
||||
<div className="flex items-center gap-1.5 group/stat">
|
||||
<Sparkles className="w-3.5 h-3.5 text-primary/60 group-hover/stat:text-primary transition-colors duration-300" />
|
||||
<span className="text-primary font-semibold">{park.ride_count || 0}</span>
|
||||
<span className="text-muted-foreground text-xs">rides</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-accent font-medium">{park.coaster_count || 0}</span>
|
||||
<FerrisWheel className="w-3 h-3 text-muted-foreground" />
|
||||
<div className="flex items-center gap-1.5 group/stat">
|
||||
<FerrisWheel className="w-3.5 h-3.5 text-accent/60 group-hover/stat:text-accent transition-colors duration-300" />
|
||||
<span className="text-accent font-semibold">{park.coaster_count || 0}</span>
|
||||
<span className="text-muted-foreground text-xs">coasters</span>
|
||||
</div>
|
||||
{park.review_count > 0 && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Users className="w-3 h-3 text-muted-foreground" />
|
||||
<span className="text-muted-foreground">{park.review_count} reviews</span>
|
||||
<div className="flex items-center gap-1.5 group/stat">
|
||||
<Users className="w-3.5 h-3.5 text-muted-foreground group-hover/stat:text-foreground transition-colors duration-300" />
|
||||
<span className="text-muted-foreground text-xs">{park.review_count} reviews</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
size="sm"
|
||||
className="bg-gradient-to-r from-primary/80 to-secondary/80 hover:from-primary hover:to-secondary transition-all duration-300"
|
||||
className="bg-gradient-to-r from-primary to-secondary hover:shadow-lg hover:shadow-primary/20 hover:scale-105 transition-all duration-300 flex-shrink-0"
|
||||
>
|
||||
<ExternalLink className="w-3 h-3 mr-1" />
|
||||
View Details
|
||||
<ExternalLink className="w-3.5 h-3.5 mr-1.5" />
|
||||
<span className="hidden sm:inline">View Details</span>
|
||||
<span className="sm:hidden">View</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user