Fix image display for all entities

This commit is contained in:
gpt-engineer-app[bot]
2025-10-02 15:04:29 +00:00
parent 94c60f1821
commit 41d6cb8771
10 changed files with 141 additions and 79 deletions

View File

@@ -46,9 +46,17 @@ export function ParkCard({ park }: ParkCardProps) {
<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 || park.card_image_id) ? (
<img
src={park.card_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${park.card_image_id}/public`}
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" />