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

Refactor: Implement Cloudflare Image Variants

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-10 14:09:51 +00:00
parent 9fc12be7e1
commit f57ae0d3ce
17 changed files with 216 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/pages/DesignerDetail.tsx
View File

@@ -1,6 +1,7 @@
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Header } from '@/components/layout/Header';
import { getBannerUrls } from '@/lib/cloudflareImageUtils';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card';
@@ -169,11 +170,18 @@ export default function DesignerDetail() {
<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.banner_image_url || designer.banner_image_id) ? (
<img
src={designer.banner_image_url || `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${designer.banner_image_id}/public`}
alt={designer.name}
className="w-full h-full object-cover"
/>
<picture>
<source
media="(max-width: 768px)"
srcSet={getBannerUrls(designer.banner_image_id).mobile || designer.banner_image_url}
/>
<img
src={getBannerUrls(designer.banner_image_id).desktop || designer.banner_image_url}
alt={designer.name}
className="w-full h-full object-cover"
loading="eager"
/>
</picture>
) : designer.logo_url ? (
<div className="flex items-center justify-center h-full bg-background/90">
<img

18
src/pages/ManufacturerDetail.tsx
View File

@@ -1,6 +1,7 @@
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Header } from '@/components/layout/Header';
import { getBannerUrls } from '@/lib/cloudflareImageUtils';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card';
@@ -181,11 +182,18 @@ export default function ManufacturerDetail() {
<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.banner_image_url || manufacturer.banner_image_id) ? (
<img
src={manufacturer.banner_image_url || `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${manufacturer.banner_image_id}/public`}
alt={manufacturer.name}
className="w-full h-full object-cover"
/>
<picture>
<source
media="(max-width: 768px)"
srcSet={getBannerUrls(manufacturer.banner_image_id).mobile || manufacturer.banner_image_url}
/>
<img
src={getBannerUrls(manufacturer.banner_image_id).desktop || manufacturer.banner_image_url}
alt={manufacturer.name}
className="w-full h-full object-cover"
loading="eager"
/>
</picture>
) : manufacturer.logo_url ? (
<div className="flex items-center justify-center h-full bg-background/90">
<img

18
src/pages/OperatorDetail.tsx
View File

@@ -1,6 +1,7 @@
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Header } from '@/components/layout/Header';
import { getBannerUrls } from '@/lib/cloudflareImageUtils';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card';
@@ -214,11 +215,18 @@ export default function OperatorDetail() {
<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.banner_image_url || operator.banner_image_id) ? (
<img
src={operator.banner_image_url || `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${operator.banner_image_id}/public`}
alt={operator.name}
className="w-full h-full object-cover"
/>
<picture>
<source
media="(max-width: 768px)"
srcSet={getBannerUrls(operator.banner_image_id).mobile || operator.banner_image_url}
/>
<img
src={getBannerUrls(operator.banner_image_id).desktop || operator.banner_image_url}
alt={operator.name}
className="w-full h-full object-cover"
loading="eager"
/>
</picture>
) : operator.logo_url ? (
<div className="flex items-center justify-center h-full bg-background/90">
<img

18
src/pages/ParkDetail.tsx
View File

@@ -1,6 +1,7 @@
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Header } from '@/components/layout/Header';
import { getBannerUrls } from '@/lib/cloudflareImageUtils';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -244,11 +245,18 @@ export default function ParkDetail() {
<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">
{(park.banner_image_url || park.banner_image_id) ? (
<img
src={park.banner_image_url || `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${park.banner_image_id}/public`}
alt={park.name}
className="w-full h-full object-cover"
/>
<picture>
<source
media="(max-width: 768px)"
srcSet={getBannerUrls(park.banner_image_id).mobile || park.banner_image_url}
/>
<img
src={getBannerUrls(park.banner_image_id).desktop || park.banner_image_url}
alt={park.name}
className="w-full h-full object-cover"
loading="eager"
/>
</picture>
) : (
<div className="flex items-center justify-center h-full">
<div className="opacity-50">

18
src/pages/PropertyOwnerDetail.tsx
View File

@@ -1,6 +1,7 @@
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Header } from '@/components/layout/Header';
import { getBannerUrls } from '@/lib/cloudflareImageUtils';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card';
@@ -214,11 +215,18 @@ export default function PropertyOwnerDetail() {
<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.banner_image_url || owner.banner_image_id) ? (
<img
src={owner.banner_image_url || `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${owner.banner_image_id}/public`}
alt={owner.name}
className="w-full h-full object-cover"
/>
<picture>
<source
media="(max-width: 768px)"
srcSet={getBannerUrls(owner.banner_image_id).mobile || owner.banner_image_url}
/>
<img
src={getBannerUrls(owner.banner_image_id).desktop || owner.banner_image_url}
alt={owner.name}
className="w-full h-full object-cover"
loading="eager"
/>
</picture>
) : owner.logo_url ? (
<div className="flex items-center justify-center h-full bg-background/90">
<img

18
src/pages/RideDetail.tsx
View File

@@ -1,6 +1,7 @@
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Header } from '@/components/layout/Header';
import { getBannerUrls } from '@/lib/cloudflareImageUtils';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -241,11 +242,18 @@ export default function RideDetail() {
<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.banner_image_id) ? (
<img
src={ride.banner_image_url || `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${ride.banner_image_id}/public`}
alt={ride.name}
className="w-full h-full object-cover"
/>
<picture>
<source
media="(max-width: 768px)"
srcSet={getBannerUrls(ride.banner_image_id).mobile || ride.banner_image_url}
/>
<img
src={getBannerUrls(ride.banner_image_id).desktop || ride.banner_image_url}
alt={ride.name}
className="w-full h-full object-cover"
loading="eager"
/>
</picture>
) : (
<div className="flex items-center justify-center h-full">
<div className="opacity-50">