From ed6b08e303fb48b0f8fe54d380d46d0e869570a0 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Tue, 7 Apr 2020 10:23:30 +0700
Subject: [PATCH] Setup ads

---
 client/components/Ad.tsx         | 38 ++++++++++++++++++++++++++++++++
 client/components/ad.css         | 27 +++++++++++++++++++++++
 client/layouts/DetailsLayout.tsx |  2 ++
 client/pages/ExplorePage.tsx     |  3 +++
 client/pages/HomePage.tsx        |  3 +++
 5 files changed, 73 insertions(+)
 create mode 100644 client/components/Ad.tsx
 create mode 100644 client/components/ad.css

diff --git a/client/components/Ad.tsx b/client/components/Ad.tsx
new file mode 100644
index 0000000..4d99ce7
--- /dev/null
+++ b/client/components/Ad.tsx
@@ -0,0 +1,38 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import React, { useEffect, useRef } from 'react';
+
+import './ad.css';
+
+const Ad: React.FC<{}> = () => {
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const source = 'https://cdn.carbonads.com/carbon.js?serve=CE7I6KQL&placement=csslayoutio';
+
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+
+        const script = document.createElement('script');
+        script.src = source;
+        script.async = true;
+        script.id = '_carbonads_js';
+        container.appendChild(script);
+
+        return () => {
+            container.removeChild(script);
+        };
+    }, []);
+
+    return (
+        <div className='flex justify-center mx-4 my-6'>
+            <div ref={containerRef} />
+        </div>
+    );
+};
+
+export default Ad;
diff --git a/client/components/ad.css b/client/components/ad.css
new file mode 100644
index 0000000..3a67768
--- /dev/null
+++ b/client/components/ad.css
@@ -0,0 +1,27 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+#carbonads {
+    background-color: #edf2f7;
+    padding: 0.5rem;
+    position: relative;
+    max-width: 24rem;
+}
+.carbon-wrap {
+    display: flex;
+}
+
+.carbon-img {
+    margin-right: 0.5rem;
+}
+
+.carbon-poweredby {
+    bottom: 0;
+    font-size: 0.75rem;
+    padding-bottom: 0.5rem;
+    padding-right: 0.5rem;
+    position: absolute;
+    right: 0;
+}
diff --git a/client/layouts/DetailsLayout.tsx b/client/layouts/DetailsLayout.tsx
index 7380680..db44e5b 100644
--- a/client/layouts/DetailsLayout.tsx
+++ b/client/layouts/DetailsLayout.tsx
@@ -6,6 +6,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
+import Ad from '../components/Ad';
 import useDocumentTitle from '../hooks/useDocumentTitle';
 import Layout from './Layout';
 
@@ -41,6 +42,7 @@ const DetailsLayout: React.FC<DetailsLayoutProps> = ({ title, children }) => {
             </div>
             <div className='xl:border xl:border-gray-400'>
                 {children}
+                <Ad />
             </div>
         </Layout>
     );
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 156f3b6..d021017 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -7,6 +7,7 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
+import Ad from '../components/Ad';
 import CoverCard from '../components/CoverCard';
 import Heading from '../components/Heading';
 import Pattern from '../constants/Pattern';
@@ -51,6 +52,8 @@ const ExplorePage = () => {
                     <div className='mb-5' style={{ textAlign: 'center' }}>
                         All covers you see in this page are made with CSS only. Inspect them! 🎉
                     </div>
+
+                    <Ad />
                 </div>
 
                 <section>
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
index 878dea5..3f42574 100644
--- a/client/pages/HomePage.tsx
+++ b/client/pages/HomePage.tsx
@@ -9,6 +9,7 @@ import { Link } from 'react-router-dom';
 
 import './home.css';
 
+import Ad from '../components/Ad';
 import CoverCard from '../components/CoverCard';
 import Pattern from '../constants/Pattern';
 import useDocumentTitle from '../hooks/useDocumentTitle';
@@ -85,6 +86,8 @@ const HomePage = () => {
                         </div>
                     </div>
 
+                    <Ad />
+
                     <div
                         className="hljs"
                         style={{