Update components/GoogleAd.tsx

components/GoogleAd.tsx

@@ -1,4 +1,3 @@
-
 import React, { useEffect, useRef } from 'react';
 
 interface GoogleAdProps {
@@ -15,7 +14,14 @@ const GoogleAd: React.FC<GoogleAdProps> = ({
   const adRef = useRef<HTMLModElement>(null);
   const hasRequestedAd = useRef(false);
 
+  // Use the provided ID or the placeholder
+  const effectiveSlotId = slotId || "1234567890";
+  const isPlaceholder = effectiveSlotId === "1234567890";
+
   useEffect(() => {
+    // If it's a placeholder, do not attempt to fetch an ad (prevents 400 errors)
+    if (isPlaceholder) return;
+
     // Prevent double execution in React Strict Mode
     if (hasRequestedAd.current) return;
 
@@ -24,7 +30,6 @@ const GoogleAd: React.FC<GoogleAdProps> = ({
       const adsbygoogle = window.adsbygoogle || [];
       
       // Safety Check: Only push ad if the element is actually visible in the DOM
-      // "No slot size for availableWidth=0" error fix.
       if (adRef.current && adRef.current.offsetWidth > 0 && adRef.current.innerHTML === "") {
           adsbygoogle.push({});
           hasRequestedAd.current = true;
@@ -32,19 +37,25 @@ const GoogleAd: React.FC<GoogleAdProps> = ({
     } catch (e) {
       console.error("AdSense error:", e);
     }
-  }, []);
+  }, [isPlaceholder]);
+
+  // Render a placeholder box if no valid Slot ID is provided
+  if (isPlaceholder) {
+    return (
+      <div className={`w-full flex flex-col items-center justify-center bg-slate-900/50 rounded border border-slate-800 border-dashed min-h-[100px] p-4 text-center ${className}`}>
+        <span className="text-xs text-slate-500 font-medium">Ad Space</span>
+        <span className="text-[10px] text-slate-600">Configure Slot ID in Code</span>
+      </div>
+    );
+  }
 
   return (
     <div className={`w-full flex justify-center bg-slate-900/50 rounded overflow-hidden min-h-[100px] ${className}`}>
-        {/* 
-            NOTE: Replace data-ad-slot with your actual Ad Unit ID from AdSense Dashboard.
-            Currently using a placeholder.
-        */}
         <ins className="adsbygoogle"
              ref={adRef}
              style={{ display: 'block', width: '100%' }}
              data-ad-client="ca-pub-8848704570658587"
-             data-ad-slot={slotId || "1234567890"} 
+             data-ad-slot={effectiveSlotId} 
              data-ad-format={format}
              // CRITICAL: Set to false to prevent the ad from expanding beyond the sidebar/panel width 
              // and overlaying the entire application, which blocks clicks on desktop.
@@ -53,4 +64,4 @@ const GoogleAd: React.FC<GoogleAdProps> = ({
   );
 };
 
-export default GoogleAd;
+export default GoogleAd;