pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-22 07:11:12 -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/operators/OperatorCard.tsx
View File

@@ -27,31 +27,41 @@ 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">
<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>
{(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 */}
<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 */}
<div className="absolute inset-0 flex items-center justify-center">
{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">
<img
src={company.logo_url}
alt={`${company.name} logo`}
className="w-full h-full object-contain p-2"
/>
{/* Logo Display */}
<div className="absolute inset-0 flex items-center justify-center">
{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">
<img
src={company.logo_url}
alt={`${company.name} logo`}
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 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>
<CardContent className="p-4 space-y-3">