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

Fix image display for all entities

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/manufacturers/ManufacturerCard.tsx
View File

@@ -40,31 +40,41 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
> >
{/* Logo/Image Section */} {/* Logo/Image Section */}
<div className="aspect-video relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden"> <div className="aspect-video relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent" /> {(company.card_image_url || company.card_image_id) ? (
<img
{/* Company Type Badge */} src={company.card_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${company.card_image_id}/public`}
<div className="absolute top-2 right-2 md:top-3 md:right-3 z-10"> alt={company.name}
<Badge variant="outline" className="bg-background/80 backdrop-blur-sm text-xs"> className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
{formatCompanyType(company.company_type)} />
</Badge> ) : (
</div> <>
<div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent" />
{/* Company Type Badge */}
<div className="absolute top-2 right-2 md:top-3 md:right-3 z-10">
<Badge variant="outline" className="bg-background/80 backdrop-blur-sm text-xs">
{formatCompanyType(company.company_type)}
</Badge>
</div>
{/* Logo Display */} {/* Logo Display */}
<div className="absolute inset-0 flex items-center justify-center"> <div className="absolute inset-0 flex items-center justify-center">
{company.logo_url ? ( {company.logo_url ? (
<div className="w-16 h-16 md:w-20 md:h-20 bg-background/90 rounded-xl overflow-hidden shadow-lg backdrop-blur-sm border border-border/50"> <div className="w-16 h-16 md:w-20 md:h-20 bg-background/90 rounded-xl overflow-hidden shadow-lg backdrop-blur-sm border border-border/50">
<img <img
src={company.logo_url} src={company.logo_url}
alt={`${company.name} logo`} alt={`${company.name} logo`}
className="w-full h-full object-contain p-2" className="w-full h-full object-contain p-2"
/> />
</div>
) : (
<div className="w-16 h-16 md:w-20 md:h-20 bg-background/90 rounded-xl shadow-lg backdrop-blur-sm border border-border/50 flex items-center justify-center">
{getCompanyIcon(company.company_type)}
</div>
)}
</div> </div>
) : ( </>
<div className="w-16 h-16 md:w-20 md:h-20 bg-background/90 rounded-xl shadow-lg backdrop-blur-sm border border-border/50 flex items-center justify-center"> )}
{getCompanyIcon(company.company_type)}
</div>
)}
</div>
</div> </div>
<CardContent className="p-3 md:p-4 space-y-2 md:space-y-3"> <CardContent className="p-3 md:p-4 space-y-2 md:space-y-3">

56
src/components/operators/OperatorCard.tsx
View File

@@ -27,31 +27,41 @@ const OperatorCard = ({ company }: OperatorCardProps) => {
> >
{/* Logo/Image Section */} {/* Logo/Image Section */}
<div className="aspect-video relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden"> <div className="aspect-video relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent" /> {(company.card_image_url || company.card_image_id) ? (
<img
{/* Park Operator Badge */} src={company.card_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${company.card_image_id}/public`}
<div className="absolute top-3 right-3 z-10"> alt={company.name}
<Badge variant="outline" className="bg-background/80 backdrop-blur-sm"> className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
Park Operator />
</Badge> ) : (
</div> <>
<div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent" />
{/* Park Operator Badge */}
<div className="absolute top-3 right-3 z-10">
<Badge variant="outline" className="bg-background/80 backdrop-blur-sm">
Park Operator
</Badge>
</div>
{/* Logo Display */} {/* Logo Display */}
<div className="absolute inset-0 flex items-center justify-center"> <div className="absolute inset-0 flex items-center justify-center">
{company.logo_url ? ( {company.logo_url ? (
<div className="w-20 h-20 bg-background/90 rounded-xl overflow-hidden shadow-lg backdrop-blur-sm border border-border/50"> <div className="w-20 h-20 bg-background/90 rounded-xl overflow-hidden shadow-lg backdrop-blur-sm border border-border/50">
<img <img
src={company.logo_url} src={company.logo_url}
alt={`${company.name} logo`} alt={`${company.name} logo`}
className="w-full h-full object-contain p-2" className="w-full h-full object-contain p-2"
/> />
</div>
) : (
<div className="w-20 h-20 bg-background/90 rounded-xl shadow-lg backdrop-blur-sm border border-border/50 flex items-center justify-center">
{getCompanyIcon()}
</div>
)}
</div> </div>
) : ( </>
<div className="w-20 h-20 bg-background/90 rounded-xl shadow-lg backdrop-blur-sm border border-border/50 flex items-center justify-center"> )}
{getCompanyIcon()}
</div>
)}
</div>
</div> </div>
<CardContent className="p-4 space-y-3"> <CardContent className="p-4 space-y-3">

56
src/components/park-owners/ParkOwnerCard.tsx
View File

@@ -27,31 +27,41 @@ const ParkOwnerCard = ({ company }: ParkOwnerCardProps) => {
> >
{/* Logo/Image Section */} {/* Logo/Image Section */}
<div className="aspect-video relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden"> <div className="aspect-video relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent" /> {(company.card_image_url || company.card_image_id) ? (
<img
{/* Property Owner Badge */} src={company.card_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${company.card_image_id}/public`}
<div className="absolute top-3 right-3 z-10"> alt={company.name}
<Badge variant="outline" className="bg-background/80 backdrop-blur-sm"> className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
Property Owner />
</Badge> ) : (
</div> <>
<div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent" />
{/* Property Owner Badge */}
<div className="absolute top-3 right-3 z-10">
<Badge variant="outline" className="bg-background/80 backdrop-blur-sm">
Property Owner
</Badge>
</div>
{/* Logo Display */} {/* Logo Display */}
<div className="absolute inset-0 flex items-center justify-center"> <div className="absolute inset-0 flex items-center justify-center">
{company.logo_url ? ( {company.logo_url ? (
<div className="w-20 h-20 bg-background/90 rounded-xl overflow-hidden shadow-lg backdrop-blur-sm border border-border/50"> <div className="w-20 h-20 bg-background/90 rounded-xl overflow-hidden shadow-lg backdrop-blur-sm border border-border/50">
<img <img
src={company.logo_url} src={company.logo_url}
alt={`${company.name} logo`} alt={`${company.name} logo`}
className="w-full h-full object-contain p-2" className="w-full h-full object-contain p-2"
/> />
</div>
) : (
<div className="w-20 h-20 bg-background/90 rounded-xl shadow-lg backdrop-blur-sm border border-border/50 flex items-center justify-center">
{getCompanyIcon()}
</div>
)}
</div> </div>
) : ( </>
<div className="w-20 h-20 bg-background/90 rounded-xl shadow-lg backdrop-blur-sm border border-border/50 flex items-center justify-center"> )}
{getCompanyIcon()}
</div>
)}
</div>
</div> </div>
<CardContent className="p-4 space-y-3"> <CardContent className="p-4 space-y-3">

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

@@ -46,9 +46,17 @@ export function ParkCard({ park }: ParkCardProps) {
<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 ? <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)} {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" />

4
src/components/rides/RideCard.tsx
View File

@@ -55,9 +55,9 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
<div className="relative overflow-hidden"> <div className="relative overflow-hidden">
{/* Image/Icon Section */} {/* 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"> <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 <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} alt={ride.name}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
/> />

8
src/pages/DesignerDetail.tsx
View File

@@ -133,7 +133,13 @@ export default function DesignerDetail() {
{/* Hero Section */} {/* Hero Section */}
<div className="relative mb-8"> <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"> <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"> <div className="flex items-center justify-center h-full bg-background/90">
<img <img
src={designer.logo_url} src={designer.logo_url}

8
src/pages/ManufacturerDetail.tsx
View File

@@ -135,7 +135,13 @@ export default function ManufacturerDetail() {
{/* Hero Section */} {/* Hero Section */}
<div className="relative mb-4 md:mb-8"> <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"> <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"> <div className="flex items-center justify-center h-full bg-background/90">
<img <img
src={manufacturer.logo_url} src={manufacturer.logo_url}

8
src/pages/OperatorDetail.tsx
View File

@@ -133,7 +133,13 @@ export default function OperatorDetail() {
{/* Hero Section */} {/* Hero Section */}
<div className="relative mb-8"> <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"> <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"> <div className="flex items-center justify-center h-full bg-background/90">
<img <img
src={operator.logo_url} src={operator.logo_url}

8
src/pages/PropertyOwnerDetail.tsx
View File

@@ -133,7 +133,13 @@ export default function PropertyOwnerDetail() {
{/* Hero Section */} {/* Hero Section */}
<div className="relative mb-8"> <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"> <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"> <div className="flex items-center justify-center h-full bg-background/90">
<img <img
src={owner.logo_url} src={owner.logo_url}

4
src/pages/RideDetail.tsx
View File

@@ -217,9 +217,9 @@ export default function RideDetail() {
{/* Hero Section */} {/* Hero Section */}
<div className="relative mb-8"> <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"> <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 <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} alt={ride.name}
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />