From bf7dd93d9e14f1cbac23bd658eb771ea592b7412 Mon Sep 17 00:00:00 2001
From: pac7 <47831526-pac7@users.noreply.replit.com>
Date: Tue, 7 Oct 2025 14:10:00 +0000
Subject: [PATCH] Update image sources to use environment variables for dynamic
 image hosting

Updates image URLs across various components and pages to dynamically fetch images using Cloudflare's image hosting service, configured via environment variables. Also updates the theme provider import for Sonner toasts and modifies the Supabase upload function to use a configurable Supabase URL.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: f1469493-0a69-4efc-91bd-478d1879573a
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7cdf4e95-3f41-4180-b8e3-8ef56d032c0e/f1469493-0a69-4efc-91bd-478d1879573a/HYhVkSk
---
 src/components/manufacturers/ManufacturerCard.tsx | 2 +-
 src/components/operators/OperatorCard.tsx         | 2 +-
 src/components/park-owners/ParkOwnerCard.tsx      | 2 +-
 src/components/parks/ParkCard.tsx                 | 2 +-
 src/components/rides/RideCard.tsx                 | 2 +-
 src/components/rides/RideModelCard.tsx            | 2 +-
 src/components/ui/sonner.tsx                      | 2 +-
 src/components/upload/PhotoUpload.tsx             | 3 ++-
 src/pages/DesignerDetail.tsx                      | 2 +-
 src/pages/ManufacturerDetail.tsx                  | 2 +-
 src/pages/OperatorDetail.tsx                      | 2 +-
 src/pages/ParkDetail.tsx                          | 2 +-
 src/pages/PropertyOwnerDetail.tsx                 | 2 +-
 src/pages/RideDetail.tsx                          | 2 +-
 14 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/components/manufacturers/ManufacturerCard.tsx b/src/components/manufacturers/ManufacturerCard.tsx
index c76aee7f..0d9edbca 100644
--- a/src/components/manufacturers/ManufacturerCard.tsx
+++ b/src/components/manufacturers/ManufacturerCard.tsx
@@ -42,7 +42,7 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
       <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`} 
+            src={company.card_image_url || `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${company.card_image_id}/public`} 
             alt={company.name}
             className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
           />
diff --git a/src/components/operators/OperatorCard.tsx b/src/components/operators/OperatorCard.tsx
index 6135aa92..a6a5c969 100644
--- a/src/components/operators/OperatorCard.tsx
+++ b/src/components/operators/OperatorCard.tsx
@@ -29,7 +29,7 @@ const OperatorCard = ({ company }: OperatorCardProps) => {
       <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`} 
+            src={company.card_image_url || `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${company.card_image_id}/public`} 
             alt={company.name}
             className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
           />
diff --git a/src/components/park-owners/ParkOwnerCard.tsx b/src/components/park-owners/ParkOwnerCard.tsx
index a0cc1c10..64eec2b5 100644
--- a/src/components/park-owners/ParkOwnerCard.tsx
+++ b/src/components/park-owners/ParkOwnerCard.tsx
@@ -29,7 +29,7 @@ const ParkOwnerCard = ({ company }: ParkOwnerCardProps) => {
       <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`} 
+            src={company.card_image_url || `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${company.card_image_id}/public`} 
             alt={company.name}
             className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
           />
diff --git a/src/components/parks/ParkCard.tsx b/src/components/parks/ParkCard.tsx
index 106183c9..e4c0e051 100644
--- a/src/components/parks/ParkCard.tsx
+++ b/src/components/parks/ParkCard.tsx
@@ -48,7 +48,7 @@ export function ParkCard({ park }: ParkCardProps) {
         <div className="aspect-[4/3] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
           {(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`} 
+              src={park.card_image_url || `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${park.card_image_id}/public`} 
               alt={park.name} 
               className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" 
             />
diff --git a/src/components/rides/RideCard.tsx b/src/components/rides/RideCard.tsx
index a957e283..91bd3078 100644
--- a/src/components/rides/RideCard.tsx
+++ b/src/components/rides/RideCard.tsx
@@ -57,7 +57,7 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
         <div className="aspect-[4/3] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
           {(ride.card_image_url || ride.card_image_id || ride.image_url) ? (
             <img 
-              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)} 
+              src={ride.card_image_url || (ride.card_image_id ? `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${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"
             />
diff --git a/src/components/rides/RideModelCard.tsx b/src/components/rides/RideModelCard.tsx
index 2bca5c26..7f41853f 100644
--- a/src/components/rides/RideModelCard.tsx
+++ b/src/components/rides/RideModelCard.tsx
@@ -34,7 +34,7 @@ export function RideModelCard({ model, manufacturerSlug }: RideModelCardProps) {
       >
         {((model as any).card_image_url || (model as any).card_image_id) ? (
           <img 
-            src={(model as any).card_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${(model as any).card_image_id}/public`}
+            src={(model as any).card_image_url || `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${(model as any).card_image_id}/public`}
             alt={model.name}
             className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
           />
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index b7f198b5..dc69951c 100644
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -1,4 +1,4 @@
-import { useTheme } from "next-themes";
+import { useTheme } from "@/components/theme/ThemeProvider";
 import { Toaster as Sonner, toast } from "sonner";
 
 type ToasterProps = React.ComponentProps<typeof Sonner>;
diff --git a/src/components/upload/PhotoUpload.tsx b/src/components/upload/PhotoUpload.tsx
index d1329981..ae85ef61 100644
--- a/src/components/upload/PhotoUpload.tsx
+++ b/src/components/upload/PhotoUpload.tsx
@@ -121,7 +121,8 @@ export function PhotoUpload({
     while (attempts < maxAttempts) {
       try {
         // Use direct fetch with URL parameters instead of supabase.functions.invoke with body
-        const response = await fetch(`https://ydvtmnrszybqnbcqbdcy.supabase.co/functions/v1/upload-image?id=${encodeURIComponent(id)}`, {
+        const supabaseUrl = import.meta.env.VITE_SUPABASE_URL || 'https://ydvtmnrszybqnbcqbdcy.supabase.co';
+        const response = await fetch(`${supabaseUrl}/functions/v1/upload-image?id=${encodeURIComponent(id)}`, {
           method: 'GET',
           headers: {
             'Authorization': `Bearer ${(await supabase.auth.getSession()).data.session?.access_token}`,
diff --git a/src/pages/DesignerDetail.tsx b/src/pages/DesignerDetail.tsx
index dba6a0ce..c3834299 100644
--- a/src/pages/DesignerDetail.tsx
+++ b/src/pages/DesignerDetail.tsx
@@ -137,7 +137,7 @@ export default function DesignerDetail() {
           <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/X-2-mmiWukWxvAQQ2_o-7Q/${designer.banner_image_id}/public`} 
+                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"
               />
diff --git a/src/pages/ManufacturerDetail.tsx b/src/pages/ManufacturerDetail.tsx
index 67cc7f48..9de192d2 100644
--- a/src/pages/ManufacturerDetail.tsx
+++ b/src/pages/ManufacturerDetail.tsx
@@ -139,7 +139,7 @@ export default function ManufacturerDetail() {
           <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/X-2-mmiWukWxvAQQ2_o-7Q/${manufacturer.banner_image_id}/public`} 
+                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"
               />
diff --git a/src/pages/OperatorDetail.tsx b/src/pages/OperatorDetail.tsx
index 7c3b927c..962385df 100644
--- a/src/pages/OperatorDetail.tsx
+++ b/src/pages/OperatorDetail.tsx
@@ -166,7 +166,7 @@ export default function OperatorDetail() {
           <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/X-2-mmiWukWxvAQQ2_o-7Q/${operator.banner_image_id}/public`} 
+                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"
               />
diff --git a/src/pages/ParkDetail.tsx b/src/pages/ParkDetail.tsx
index 3084ebd0..c9b66bc8 100644
--- a/src/pages/ParkDetail.tsx
+++ b/src/pages/ParkDetail.tsx
@@ -224,7 +224,7 @@ export default function ParkDetail() {
           <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/X-2-mmiWukWxvAQQ2_o-7Q/${park.banner_image_id}/public`} 
+                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" 
               />
diff --git a/src/pages/PropertyOwnerDetail.tsx b/src/pages/PropertyOwnerDetail.tsx
index 6e1143cc..d9bfedf7 100644
--- a/src/pages/PropertyOwnerDetail.tsx
+++ b/src/pages/PropertyOwnerDetail.tsx
@@ -166,7 +166,7 @@ export default function PropertyOwnerDetail() {
           <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/X-2-mmiWukWxvAQQ2_o-7Q/${owner.banner_image_id}/public`} 
+                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"
               />
diff --git a/src/pages/RideDetail.tsx b/src/pages/RideDetail.tsx
index 20ed1b1a..35c0ae43 100644
--- a/src/pages/RideDetail.tsx
+++ b/src/pages/RideDetail.tsx
@@ -221,7 +221,7 @@ export default function RideDetail() {
           <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/X-2-mmiWukWxvAQQ2_o-7Q/${ride.banner_image_id}/public`} 
+                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"
               />