mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-20 09:31:13 -05:00
Fix image display for all entities
This commit is contained in:
@@ -40,6 +40,14 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
|
||||
>
|
||||
{/* Logo/Image Section */}
|
||||
<div className="aspect-video relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
|
||||
{(company.card_image_url || company.card_image_id) ? (
|
||||
<img
|
||||
src={company.card_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${company.card_image_id}/public`}
|
||||
alt={company.name}
|
||||
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent" />
|
||||
|
||||
{/* Company Type Badge */}
|
||||
@@ -65,6 +73,8 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<CardContent className="p-3 md:p-4 space-y-2 md:space-y-3">
|
||||
|
||||
@@ -27,6 +27,14 @@ const OperatorCard = ({ company }: OperatorCardProps) => {
|
||||
>
|
||||
{/* Logo/Image Section */}
|
||||
<div className="aspect-video relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
|
||||
{(company.card_image_url || company.card_image_id) ? (
|
||||
<img
|
||||
src={company.card_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${company.card_image_id}/public`}
|
||||
alt={company.name}
|
||||
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent" />
|
||||
|
||||
{/* Park Operator Badge */}
|
||||
@@ -52,6 +60,8 @@ const OperatorCard = ({ company }: OperatorCardProps) => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<CardContent className="p-4 space-y-3">
|
||||
|
||||
@@ -27,6 +27,14 @@ const ParkOwnerCard = ({ company }: ParkOwnerCardProps) => {
|
||||
>
|
||||
{/* Logo/Image Section */}
|
||||
<div className="aspect-video relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
|
||||
{(company.card_image_url || company.card_image_id) ? (
|
||||
<img
|
||||
src={company.card_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${company.card_image_id}/public`}
|
||||
alt={company.name}
|
||||
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent" />
|
||||
|
||||
{/* Property Owner Badge */}
|
||||
@@ -52,6 +60,8 @@ const ParkOwnerCard = ({ company }: ParkOwnerCardProps) => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<CardContent className="p-4 space-y-3">
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -55,9 +55,9 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
|
||||
<div className="relative overflow-hidden">
|
||||
{/* Image/Icon Section */}
|
||||
<div className="aspect-video bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
|
||||
{(ride.card_image_url || ride.image_url) ? (
|
||||
{(ride.card_image_url || ride.card_image_id || ride.image_url) ? (
|
||||
<img
|
||||
src={ride.card_image_url || ride.image_url}
|
||||
src={ride.card_image_url || (ride.card_image_id ? `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${ride.card_image_id}/public` : ride.image_url)}
|
||||
alt={ride.name}
|
||||
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
|
||||
/>
|
||||
|
||||
@@ -133,7 +133,13 @@ export default function DesignerDetail() {
|
||||
{/* Hero Section */}
|
||||
<div className="relative mb-8">
|
||||
<div className="aspect-[21/9] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 rounded-lg overflow-hidden relative">
|
||||
{designer.logo_url ? (
|
||||
{(designer.banner_image_url || designer.banner_image_id) ? (
|
||||
<img
|
||||
src={designer.banner_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${designer.banner_image_id}/public`}
|
||||
alt={designer.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : designer.logo_url ? (
|
||||
<div className="flex items-center justify-center h-full bg-background/90">
|
||||
<img
|
||||
src={designer.logo_url}
|
||||
|
||||
@@ -135,7 +135,13 @@ export default function ManufacturerDetail() {
|
||||
{/* Hero Section */}
|
||||
<div className="relative mb-4 md:mb-8">
|
||||
<div className="aspect-[16/9] md:aspect-[21/9] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 rounded-lg overflow-hidden relative">
|
||||
{manufacturer.logo_url ? (
|
||||
{(manufacturer.banner_image_url || manufacturer.banner_image_id) ? (
|
||||
<img
|
||||
src={manufacturer.banner_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${manufacturer.banner_image_id}/public`}
|
||||
alt={manufacturer.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : manufacturer.logo_url ? (
|
||||
<div className="flex items-center justify-center h-full bg-background/90">
|
||||
<img
|
||||
src={manufacturer.logo_url}
|
||||
|
||||
@@ -133,7 +133,13 @@ export default function OperatorDetail() {
|
||||
{/* Hero Section */}
|
||||
<div className="relative mb-8">
|
||||
<div className="aspect-[21/9] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 rounded-lg overflow-hidden relative">
|
||||
{operator.logo_url ? (
|
||||
{(operator.banner_image_url || operator.banner_image_id) ? (
|
||||
<img
|
||||
src={operator.banner_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${operator.banner_image_id}/public`}
|
||||
alt={operator.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : operator.logo_url ? (
|
||||
<div className="flex items-center justify-center h-full bg-background/90">
|
||||
<img
|
||||
src={operator.logo_url}
|
||||
|
||||
@@ -133,7 +133,13 @@ export default function PropertyOwnerDetail() {
|
||||
{/* Hero Section */}
|
||||
<div className="relative mb-8">
|
||||
<div className="aspect-[21/9] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 rounded-lg overflow-hidden relative">
|
||||
{owner.logo_url ? (
|
||||
{(owner.banner_image_url || owner.banner_image_id) ? (
|
||||
<img
|
||||
src={owner.banner_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${owner.banner_image_id}/public`}
|
||||
alt={owner.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : owner.logo_url ? (
|
||||
<div className="flex items-center justify-center h-full bg-background/90">
|
||||
<img
|
||||
src={owner.logo_url}
|
||||
|
||||
@@ -217,9 +217,9 @@ export default function RideDetail() {
|
||||
{/* Hero Section */}
|
||||
<div className="relative mb-8">
|
||||
<div className="aspect-[21/9] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 rounded-lg overflow-hidden relative">
|
||||
{(ride.banner_image_url || ride.card_image_url || ride.image_url) ? (
|
||||
{(ride.banner_image_url || ride.banner_image_id) ? (
|
||||
<img
|
||||
src={ride.banner_image_url || ride.card_image_url || ride.image_url}
|
||||
src={ride.banner_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${ride.banner_image_id}/public`}
|
||||
alt={ride.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user