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

Refactor: Update ParkDetail with RideCard

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-29 13:31:07 +00:00
parent d8a3ef1b44
commit 0bba766b4b
1 changed files with 17 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
src/pages/ParkDetail.tsx
View File

@@ -6,9 +6,9 @@ import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Separator } from '@/components/ui/separator';
import { MapPin, Star, Clock, Phone, Globe, Calendar, ArrowLeft, Users, Zap, Camera, Castle, FerrisWheel, Waves, Tent, Theater, Train } from 'lucide-react';
import { MapPin, Star, Clock, Phone, Globe, Calendar, ArrowLeft, Users, Zap, Camera, Castle, FerrisWheel, Waves, Tent } from 'lucide-react';
import { ReviewsSection } from '@/components/reviews/ReviewsSection';
import { MeasurementDisplay } from '@/components/ui/measurement-display';
import { RideCard } from '@/components/rides/RideCard';
import { Park, Ride } from '@/types/database';
import { supabase } from '@/integrations/supabase/client';
export default function ParkDetail() {
@@ -81,24 +81,6 @@ export default function ParkDetail() {
const formatParkType = (type: string) => {
return type.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
};
const getRideIcon = (category: string) => {
switch (category) {
case 'roller_coaster':
return <FerrisWheel className="w-5 h-5" />;
case 'water_ride':
return <Waves className="w-5 h-5" />;
case 'dark_ride':
return <Theater className="w-5 h-5" />;
case 'flat_ride':
return <FerrisWheel className="w-5 h-5" />;
case 'kiddie_ride':
return <FerrisWheel className="w-5 h-5" />;
case 'transportation':
return <Train className="w-5 h-5" />;
default:
return <FerrisWheel className="w-5 h-5" />;
}
};
if (loading) {
return <div className="min-h-screen bg-background">
<Header />
@@ -283,26 +265,21 @@ export default function ParkDetail() {
</CardContent>
</Card>}
{/* Top Rides Preview */}
{/* Featured Rides */}
<Card>
<CardHeader>
<CardTitle>Featured Rides</CardTitle>
</CardHeader>
<CardContent>
<div className="grid md:grid-cols-2 gap-4">
{rides.slice(0, 4).map(ride => <div key={ride.id} className="flex items-center gap-3 p-3 border rounded-lg hover:bg-muted/50 cursor-pointer transition-colors" onClick={() => navigate(`/parks/${park.slug}/rides/${ride.slug}`)}>
<div className="flex items-center">{getRideIcon(ride.category)}</div>
<div className="flex-1">
<h4 className="font-medium">{ride.name}</h4>
<p className="text-sm text-muted-foreground">
{ride.category.replace('_', ' ')}
</p>
</div>
{ride.average_rating > 0 && <div className="flex items-center gap-1">
<Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
<span className="text-sm">{ride.average_rating.toFixed(1)}</span>
</div>}
</div>)}
<div className="grid sm:grid-cols-2 gap-4">
{rides.slice(0, 4).map(ride => (
<RideCard
key={ride.id}
ride={ride}
showParkName={false}
className="h-full"
/>
))}
</div>
</CardContent>
</Card>
@@ -372,99 +349,13 @@ export default function ParkDetail() {
</TabsContent>
<TabsContent value="rides" className="mt-6">
<div className="grid md:grid-cols-3 lg:grid-cols-4 gap-4">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
{rides.map(ride => (
<Card
<RideCard
key={ride.id}
className="group overflow-hidden hover:shadow-xl transition-all duration-300 cursor-pointer border-0 bg-gradient-to-br from-card via-card/95 to-card/90 backdrop-blur-sm"
onClick={() => navigate(`/parks/${park.slug}/rides/${ride.slug}`)}
>
<div className="aspect-[3/2] bg-gradient-to-br from-primary/20 via-secondary/15 to-accent/10 relative overflow-hidden">
{ride.image_url ? (
<img
src={ride.image_url}
alt={ride.name}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
ride={ride}
showParkName={false}
/>
) : (
<div className="flex items-center justify-center h-full">
<div className="opacity-40 group-hover:opacity-60 transition-opacity">
{getRideIcon(ride.category)}
</div>
</div>
)}
{/* Status Badge */}
<div className="absolute top-3 right-3">
<Badge
variant="secondary"
className={`text-xs font-medium ${
ride.status === 'operating'
? 'bg-green-500/20 text-green-400 border-green-500/30'
: ride.status === 'closed'
? 'bg-red-500/20 text-red-400 border-red-500/30'
: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30'
}`}
>
{ride.status}
</Badge>
</div>
{/* Rating */}
{ride.average_rating > 0 && (
<div className="absolute bottom-3 right-3 bg-black/50 backdrop-blur-sm rounded-lg px-2 py-1">
<div className="flex items-center gap-1">
<Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
<span className="text-white text-xs font-medium">
{ride.average_rating.toFixed(1)}
</span>
</div>
</div>
)}
</div>
<CardContent className="p-3">
<div className="space-y-2">
{/* Title and Category */}
<div>
<h3 className="font-semibold text-lg group-hover:text-primary transition-colors line-clamp-1">
{ride.name}
</h3>
<div className="mt-1">
<p className="text-sm text-muted-foreground capitalize">
{ride.category.replace('_', ' ')}
</p>
</div>
</div>
{/* Description */}
{ride.description && (
<p className="text-sm text-muted-foreground line-clamp-2 leading-relaxed">
{ride.description}
</p>
)}
{/* Stats */}
<div className="flex items-center gap-2 flex-wrap">
{ride.max_speed_kmh && ride.max_speed_kmh > 0 && (
<span className="bg-primary/10 text-primary px-2 py-1 rounded-md text-xs font-medium">
<MeasurementDisplay value={ride.max_speed_kmh} type="speed" />
</span>
)}
{ride.max_height_meters && ride.max_height_meters > 0 && (
<span className="bg-accent/10 text-accent px-2 py-1 rounded-md text-xs font-medium">
<MeasurementDisplay value={ride.max_height_meters} type="distance" />
</span>
)}
{ride.inversions > 0 && (
<span className="bg-secondary/10 text-secondary px-2 py-1 rounded-md text-xs font-medium">
{ride.inversions} inversions
</span>
)}
</div>
</div>
</CardContent>
</Card>
))}
</div>
</TabsContent>