mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-22 17:51:12 -05:00
Refactor code structure and remove redundant changes
This commit is contained in:
pacnpal
137
src-old/components/parks/ParkCard.tsx
Normal file
137
src-old/components/parks/ParkCard.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
import { MapPin, Star, Users, Clock, Castle, FerrisWheel, Waves, Tent } from 'lucide-react';
|
||||
import { formatLocationShort } from '@/lib/locationFormatter';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Park } from '@/types/database';
|
||||
import { getCloudflareImageUrl } from '@/lib/cloudflareImageUtils';
|
||||
|
||||
interface ParkCardProps {
|
||||
park: Park;
|
||||
}
|
||||
export function ParkCard({ park }: ParkCardProps) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleClick = () => {
|
||||
navigate(`/parks/${park.slug}`);
|
||||
};
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'operating':
|
||||
return 'bg-green-500/50 text-green-200 border-green-500/50';
|
||||
case 'seasonal':
|
||||
return 'bg-yellow-500/50 text-yellow-200 border-yellow-500/50';
|
||||
case 'under_construction':
|
||||
return 'bg-blue-500/50 text-blue-200 border-blue-500/50';
|
||||
default:
|
||||
return 'bg-red-500/50 text-red-200 border-red-500/50';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusIcon = (status: string) => {
|
||||
switch (status) {
|
||||
case 'operating':
|
||||
return <Clock className="w-3 h-3" />;
|
||||
case 'seasonal':
|
||||
return <Clock className="w-3 h-3" />;
|
||||
case 'under_construction':
|
||||
return <Clock className="w-3 h-3" />;
|
||||
default:
|
||||
return <Clock className="w-3 h-3" />;
|
||||
}
|
||||
};
|
||||
const getParkTypeIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case 'theme_park':
|
||||
return <Castle className="w-5 h-5" />;
|
||||
case 'amusement_park':
|
||||
return <FerrisWheel className="w-5 h-5" />;
|
||||
case 'water_park':
|
||||
return <Waves className="w-5 h-5" />;
|
||||
case 'family_entertainment':
|
||||
return <Tent className="w-5 h-5" />;
|
||||
default:
|
||||
return <FerrisWheel className="w-5 h-5" />;
|
||||
}
|
||||
};
|
||||
const formatParkType = (type: string) => {
|
||||
return type.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
|
||||
};
|
||||
return <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 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" onClick={handleClick}>
|
||||
<div className="relative overflow-hidden">
|
||||
{/* Image Placeholder with Gradient */}
|
||||
<div className="aspect-[3/2] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
|
||||
{(park.card_image_url || park.card_image_id) ? (
|
||||
<img
|
||||
src={park.card_image_url || getCloudflareImageUrl(park.card_image_id || '', 'card')}
|
||||
srcSet={park.card_image_id ? `
|
||||
${getCloudflareImageUrl(park.card_image_id, 'cardthumb')} 600w,
|
||||
${getCloudflareImageUrl(park.card_image_id, 'card')} 1200w
|
||||
` : undefined}
|
||||
sizes="(max-width: 640px) 600px, 1200px"
|
||||
alt={park.name}
|
||||
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<div className="relative flex items-center justify-center">
|
||||
<div className="absolute inset-0 rounded-full bg-primary/20 blur-xl animate-pulse" />
|
||||
<div className="relative w-16 h-16 rounded-full bg-gradient-to-br from-primary/30 to-secondary/30 flex items-center justify-center border border-primary/20">
|
||||
{getParkTypeIcon(park.park_type)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Gradient Overlay */}
|
||||
<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 */}
|
||||
<Badge className={`absolute top-3 right-3 ${getStatusColor(park.status)} backdrop-blur-sm border shadow-lg font-medium text-xs px-2.5 py-1 inline-flex items-center gap-1.5`}>
|
||||
{getStatusIcon(park.status)}
|
||||
<span>{park.status.replace('_', ' ').toUpperCase()}</span>
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<CardContent className="p-2.5 space-y-1.5 border-t border-border/30">
|
||||
{/* Header */}
|
||||
<div className="space-y-0.5 min-w-0">
|
||||
<h3 className="font-bold text-base group-hover:text-primary transition-all duration-300 line-clamp-2 break-words group-hover:drop-shadow-[0_0_8px_rgba(139,92,246,0.5)]">
|
||||
{park.name}
|
||||
</h3>
|
||||
|
||||
{park.location && (
|
||||
<div className="flex items-center gap-1 text-sm text-muted-foreground min-w-0">
|
||||
<MapPin className="w-3 h-3 flex-shrink-0" />
|
||||
<span className="truncate">
|
||||
{formatLocationShort(park.location)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Stats & Rating */}
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<div className="flex items-center gap-3">
|
||||
{(park.ride_count != null && park.ride_count > 0) && (
|
||||
<div className="flex items-center gap-1">
|
||||
<FerrisWheel className="w-4 h-4 text-primary/70 flex-shrink-0" />
|
||||
<span className="font-medium">{park.ride_count}</span>
|
||||
<span className="text-muted-foreground">rides</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{(park.average_rating != null && park.average_rating > 0) && (
|
||||
<div className="inline-flex items-center gap-1">
|
||||
<Star className="w-4 h-4 fill-yellow-500 text-yellow-500" />
|
||||
<span className="font-semibold">{park.average_rating.toFixed(1)}</span>
|
||||
{(park.review_count != null && park.review_count > 0) && (
|
||||
<span className="text-muted-foreground">({park.review_count})</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</div>
|
||||
</Card>;
|
||||
}
|
||||
Reference in New Issue
Block a user