fix: refactor ads

Author: OlivierCo

apps/www/app/docs/@aside/[name]/page.tsx

@@ -1,12 +1,11 @@
-"use client";
-
 import Script from "next/script";
 import {
   Card,
   CardContent,
   CardHeader,
   CardTitle,
 } from "@workspace/ui/components/card";
+import { AdsenseAd } from "@/components/adsense-ad";
 
 export default function HookAside() {
   return (
@@ -32,24 +31,7 @@ export default function HookAside() {
         </CardContent>
       </Card>
 
-      <div className="mt-4">
-        <ins
-          className="adsbygoogle"
-          style={{ display: "block" }}
-          data-ad-client="ca-pub-1640905025052378"
-          data-ad-slot="9540285659"
-          data-ad-format="auto"
-          data-full-width-responsive="true"
-        />
-
-        <Script
-          id="adsense-docs-aside"
-          strategy="afterInteractive"
-          dangerouslySetInnerHTML={{
-            __html: "(adsbygoogle = window.adsbygoogle || []).push({});",
-          }}
-        />
-      </div>
+      <AdsenseAd adSlot="9540285659" className="mt-4" />
     </aside>
   );
 }

apps/www/app/docs/@aside/page.tsx

@@ -1,12 +1,11 @@
-"use client";
-
 import Script from "next/script";
 import {
   Card,
   CardHeader,
   CardTitle,
   CardContent,
 } from "@workspace/ui/components/card";
+import { AdsenseAd } from "@/components/adsense-ad";
 
 export default function DocsAside() {
   return (
@@ -32,24 +31,7 @@ export default function DocsAside() {
         </CardContent>
       </Card>
 
-      <div className="mt-4">
-        <ins
-          className="adsbygoogle"
-          style={{ display: "block" }}
-          data-ad-client="ca-pub-1640905025052378"
-          data-ad-slot="9540285659"
-          data-ad-format="auto"
-          data-full-width-responsive="true"
-        />
-
-        <Script
-          id="adsense-docs-aside"
-          strategy="afterInteractive"
-          dangerouslySetInnerHTML={{
-            __html: "(adsbygoogle = window.adsbygoogle || []).push({});",
-          }}
-        />
-      </div>
+      <AdsenseAd adSlot="9540285659" className="mt-4" />
     </aside>
   );
 }

apps/www/components/adsense-ad.tsx

@@ -0,0 +1,48 @@
+import Script from "next/script";
+import type { CSSProperties } from "react";
+
+type AdsenseAdProps = {
+  adSlot: string;
+  adClient?: string;
+  adFormat?: string;
+  fullWidthResponsive?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  scriptId?: string;
+};
+
+export function AdsenseAd({
+  adSlot,
+  adClient = process.env.NEXT_PUBLIC_AD_CLIENT_ID,
+  adFormat = "auto",
+  fullWidthResponsive = true,
+  className,
+  style = { display: "block" },
+  scriptId,
+}: AdsenseAdProps) {
+  // If client ID is missing, avoid rendering to prevent runtime errors
+  if (!adClient) {
+    return null;
+  }
+
+  return (
+    <div className={className}>
+      <ins
+        className="adsbygoogle"
+        style={style}
+        data-ad-client={adClient}
+        data-ad-slot={adSlot}
+        data-ad-format={adFormat}
+        data-full-width-responsive={fullWidthResponsive ? "true" : "false"}
+      />
+
+      <Script
+        id={scriptId ?? `adsense-${adSlot}`}
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: "(adsbygoogle = window.adsbygoogle || []).push({});",
+        }}
+      />
+    </div>
+  );
+}