add pub components

cpereiraweb · Mar 16, 2021 · 6dcb76a · 6dcb76a
1 parent 5ce42fb
commit 6dcb76a
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 19 deletions.
diff --git a/components/layout/ComponentLayout.tsx b/components/layout/ComponentLayout.tsx
@@ -8,6 +8,7 @@ import Link from 'next/link';
 import ReactDOMServer from 'react-dom/server';
 import Toggle from '../kit/components/form/toggle/Toggle';
 import { formatHtml } from '../../utils/Utils';
+import AdBanner from '../site/Pub/Banner';
 
 interface Props {
     element: JSX.Element;
@@ -217,15 +218,7 @@ const ComponentLayout = (props: Props) => {
                         <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
                     </div>
                     <div className="p-4">
-                        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-                        <ins
-                            className="adsbygoogle"
-                            style={{ display: 'block' }}
-                            data-ad-format="fluid"
-                            data-ad-layout-key="-6t+ed+2i-1n-4w"
-                            data-ad-client="ca-pub-9198515375847190"
-                            data-ad-slot="5049524770"
-                        ></ins>
+                        <AdBanner />
                     </div>
                 </div>
             )}

diff --git a/components/site/Pub/Banner.tsx b/components/site/Pub/Banner.tsx
@@ -0,0 +1,24 @@
+import React, { useEffect } from 'react';
+
+const AdBanner = () => {
+    useEffect(() => {
+        try {
+            ((window as any).adsbygoogle = (window as any).adsbygoogle || []).push({});
+        } catch (err) {
+            console.log(err);
+        }
+    }, []);
+
+    return (
+        <ins
+            className="adsbygoogle"
+            style={{ display: 'block' }}
+            data-ad-format="fluid"
+            data-ad-layout-key="-6t+ed+2i-1n-4w"
+            data-ad-client="ca-pub-9198515375847190"
+            data-ad-slot="5049524770"
+        ></ins>
+    );
+};
+
+export default AdBanner;
diff --git a/components/site/Pub/SquarePub.tsx b/components/site/Pub/SquarePub.tsx
@@ -0,0 +1,24 @@
+import React, { useEffect } from 'react';
+
+const SquarePub = () => {
+    useEffect(() => {
+        try {
+            ((window as any).adsbygoogle = (window as any).adsbygoogle || []).push({});
+        } catch (err) {
+            console.log(err);
+        }
+    }, []);
+
+    return (
+        <ins
+            className="adsbygoogle"
+            style={{ display: 'block' }}
+            data-ad-client="ca-pub-9198515375847190"
+            data-ad-slot="5242587151"
+            data-ad-format="auto"
+            data-full-width-responsive="true"
+        ></ins>
+    );
+};
+
+export default SquarePub;
diff --git a/components/site/section/SectionDesc.tsx b/components/site/section/SectionDesc.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import Link from 'next/link';
 import Badge from '../../kit/components/elements/badges/Badge';
+import SquarePub from '../Pub/SquarePub';
 
 interface Props {
     items: section[];
@@ -73,17 +74,9 @@ const SectionDesc = ({ title, items, id, hasCommingSoon, isTemplate }: Props) =>
                             </div>
                         </div>
                     )}
-                    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+
                     <div className="opacity-100 rounded-lg w-full sm:w-1/3 m-2 md:m-0  md:w-1/5">
-                        <ins
-                            className="adsbygoogle"
-                            style={{ display: 'block' }}
-                            data-ad-client="ca-pub-9198515375847190"
-                            data-ad-slot="5242587151"
-                            data-ad-format="auto"
-                            data-full-width-responsive="true"
-                        ></ins>
-                        <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+                        <SquarePub />
                     </div>
                 </>
             </div>