From 6dcb76ae41f5995bb6f04df88814cbc96b438fcf Mon Sep 17 00:00:00 2001
From: Charlie RABILLER <charlie.rabiller@niji.fr>
Date: Tue, 16 Mar 2021 08:02:06 +0100
Subject: [PATCH] add pub components

---
 components/layout/ComponentLayout.tsx   | 11 ++---------
 components/site/Pub/Banner.tsx          | 24 ++++++++++++++++++++++++
 components/site/Pub/SquarePub.tsx       | 24 ++++++++++++++++++++++++
 components/site/section/SectionDesc.tsx | 13 +++----------
 4 files changed, 53 insertions(+), 19 deletions(-)
 create mode 100644 components/site/Pub/Banner.tsx
 create mode 100644 components/site/Pub/SquarePub.tsx

diff --git a/components/layout/ComponentLayout.tsx b/components/layout/ComponentLayout.tsx
index 5c887f0..714aff0 100644
--- 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
new file mode 100644
index 0000000..6e2d5ee
--- /dev/null
+++ 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
new file mode 100644
index 0000000..8ae54b4
--- /dev/null
+++ 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
index f01f03b..3f96117 100644
--- 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>