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

Visual edit in Lovable

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-29 12:56:34 +00:00
parent ac85e8b14f
commit 5435bb1fbd
1 changed files with 35 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/components/parks/ParkCard.tsx
View File

@@ -3,65 +3,56 @@ import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Park } from '@/types/database';
interface ParkCardProps {
park: Park;
onClick?: () => void;
}
export function ParkCard({ park, onClick }: ParkCardProps) {
export function ParkCard({
park,
onClick
}: ParkCardProps) {
const getStatusColor = (status: string) => {
switch (status) {
case 'operating': return 'bg-green-500/20 text-green-400 border-green-500/30';
case 'seasonal': return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30';
case 'under_construction': return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
default: return 'bg-red-500/20 text-red-400 border-red-500/30';
case 'operating':
return 'bg-green-500/20 text-green-400 border-green-500/30';
case 'seasonal':
return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30';
case 'under_construction':
return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
default:
return 'bg-red-500/20 text-red-400 border-red-500/30';
}
};
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" />;
case 'theme_park':
return;
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 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 transition-all duration-300 cursor-pointer hover:scale-[1.02]"
onClick={onClick}
>
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 transition-all duration-300 cursor-pointer hover:scale-[1.02]" onClick={onClick}>
<div className="relative overflow-hidden">
{/* Image Placeholder with Gradient */}
<div className="aspect-video bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
{park.card_image_url ? (
<img
src={park.card_image_url}
alt={park.name}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
/>
) : (
<div className="opacity-50 flex items-center justify-center">
{park.card_image_url ? <img src={park.card_image_url} alt={park.name} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" /> : <div className="opacity-50 flex items-center justify-center">
{getParkTypeIcon(park.park_type)}
</div>
)}
</div>}
{/* Gradient Overlay */}
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
{/* Status Badge */}
<Badge
className={`absolute top-3 right-3 ${getStatusColor(park.status)} border`}
>
<Badge className={`absolute top-3 right-3 ${getStatusColor(park.status)} border`}>
{park.status.replace('_', ' ').toUpperCase()}
</Badge>
</div>
@@ -76,20 +67,16 @@ export function ParkCard({ park, onClick }: ParkCardProps) {
{getParkTypeIcon(park.park_type)}
</div>
{park.location && (
<div className="flex items-center text-sm text-muted-foreground">
{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.country}
</div>
)}
</div>}
</div>
{/* Description */}
{park.description && (
<p className="text-sm text-muted-foreground line-clamp-2">
{park.description && <p className="text-sm text-muted-foreground line-clamp-2">
{park.description}
</p>
)}
</p>}
{/* Park Type */}
<Badge variant="outline" className="text-xs">
@@ -109,24 +96,18 @@ export function ParkCard({ park, onClick }: ParkCardProps) {
</div>
</div>
{park.average_rating > 0 && (
<div className="flex items-center gap-1">
{park.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 font-medium">{park.average_rating.toFixed(1)}</span>
<span className="text-xs text-muted-foreground">({park.review_count})</span>
</div>
)}
</div>}
</div>
{/* Action Button */}
<Button
className="w-full mt-3 bg-gradient-to-r from-primary/80 to-secondary/80 hover:from-primary hover:to-secondary transition-all duration-300"
size="sm"
>
<Button className="w-full mt-3 bg-gradient-to-r from-primary/80 to-secondary/80 hover:from-primary hover:to-secondary transition-all duration-300" size="sm">
Explore Park
</Button>
</CardContent>
</div>
</Card>
);
</Card>;
}