pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-22 12:11:21 -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 { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Park } from '@/types/database'; import { Park } from '@/types/database';
interface ParkCardProps { interface ParkCardProps {
park: Park; park: Park;
onClick?: () => void; onClick?: () => void;
} }
export function ParkCard({
export function ParkCard({ park, onClick }: ParkCardProps) { park,
onClick
}: ParkCardProps) {
const getStatusColor = (status: string) => { const getStatusColor = (status: string) => {
switch (status) { switch (status) {
case 'operating': return 'bg-green-500/20 text-green-400 border-green-500/30'; case 'operating':
case 'seasonal': return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30'; return 'bg-green-500/20 text-green-400 border-green-500/30';
case 'under_construction': return 'bg-blue-500/20 text-blue-400 border-blue-500/30'; case 'seasonal':
default: return 'bg-red-500/20 text-red-400 border-red-500/30'; 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) => { const getParkTypeIcon = (type: string) => {
switch (type) { switch (type) {
case 'theme_park': return <Castle className="w-5 h-5" />; case 'theme_park':
case 'amusement_park': return <FerrisWheel className="w-5 h-5" />; return;
case 'water_park': return <Waves className="w-5 h-5" />; case 'amusement_park':
case 'family_entertainment': return <Tent className="w-5 h-5" />; return <FerrisWheel className="w-5 h-5" />;
default: 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) => { const formatParkType = (type: string) => {
return type.split('_').map(word => return type.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
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"> <div className="relative overflow-hidden">
{/* Image Placeholder with Gradient */} {/* 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"> <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 ? ( {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">
<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)} {getParkTypeIcon(park.park_type)}
</div> </div>}
)}
{/* Gradient Overlay */} {/* Gradient Overlay */}
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" /> <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
{/* Status Badge */} {/* Status Badge */}
<Badge <Badge className={`absolute top-3 right-3 ${getStatusColor(park.status)} border`}>
className={`absolute top-3 right-3 ${getStatusColor(park.status)} border`}
>
{park.status.replace('_', ' ').toUpperCase()} {park.status.replace('_', ' ').toUpperCase()}
</Badge> </Badge>
</div> </div>
@@ -76,20 +67,16 @@ export function ParkCard({ park, onClick }: ParkCardProps) {
{getParkTypeIcon(park.park_type)} {getParkTypeIcon(park.park_type)}
</div> </div>
{park.location && ( {park.location && <div className="flex items-center text-sm text-muted-foreground">
<div className="flex items-center text-sm text-muted-foreground">
<MapPin className="w-3 h-3 mr-1" /> <MapPin className="w-3 h-3 mr-1" />
{park.location.city && `${park.location.city}, `}{park.location.country} {park.location.city && `${park.location.city}, `}{park.location.country}
</div> </div>}
)}
</div> </div>
{/* Description */} {/* Description */}
{park.description && ( {park.description && <p className="text-sm text-muted-foreground line-clamp-2">
<p className="text-sm text-muted-foreground line-clamp-2">
{park.description} {park.description}
</p> </p>}
)}
{/* Park Type */} {/* Park Type */}
<Badge variant="outline" className="text-xs"> <Badge variant="outline" className="text-xs">
@@ -109,24 +96,18 @@ export function ParkCard({ park, onClick }: ParkCardProps) {
</div> </div>
</div> </div>
{park.average_rating > 0 && ( {park.average_rating > 0 && <div className="flex items-center gap-1">
<div className="flex items-center gap-1">
<Star className="w-3 h-3 fill-yellow-400 text-yellow-400" /> <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-sm font-medium">{park.average_rating.toFixed(1)}</span>
<span className="text-xs text-muted-foreground">({park.review_count})</span> <span className="text-xs text-muted-foreground">({park.review_count})</span>
</div> </div>}
)}
</div> </div>
{/* Action Button */} {/* Action Button */}
<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">
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 Explore Park
</Button> </Button>
</CardContent> </CardContent>
</div> </div>
</Card> </Card>;
);
} }