From 3794d06f3e46b1207b6675d9efee0ce0fbe8a766 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sun, 26 Sep 2021 15:00:18 +0700
Subject: [PATCH] Add ad to post's layout

---
 components/Ad.tsx      | 16 ++++++++++++++++
 css/demo.css           | 12 ------------
 layouts/PostLayout.tsx |  6 ++++++
 public/css/demo.css    | 11 +++++++++++
 styles/blocks/_ad.scss | 22 ++++++++++++++++++++++
 styles/index.scss      |  1 +
 6 files changed, 56 insertions(+), 12 deletions(-)
 create mode 100644 components/Ad.tsx
 delete mode 100644 css/demo.css
 create mode 100644 public/css/demo.css
 create mode 100644 styles/blocks/_ad.scss

diff --git a/components/Ad.tsx b/components/Ad.tsx
new file mode 100644
index 00000000..d83da50c
--- /dev/null
+++ b/components/Ad.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+export const Ad = () => {
+    const containerRef = React.useRef<HTMLDivElement>();
+
+    React.useEffect(() => {
+        const script = document.createElement('script');
+        script.async = true;
+        script.setAttribute('id', '_carbonads_js');
+        script.src = 'https://cdn.carbonads.com/carbon.js?serve=CE7I6KQI&placement=htmldomdev';
+
+        containerRef.current.appendChild(script);
+    }, []);
+
+    return <div ref={containerRef} />;
+};
diff --git a/css/demo.css b/css/demo.css
deleted file mode 100644
index c49322d1..00000000
--- a/css/demo.css
+++ /dev/null
@@ -1,12 +0,0 @@
-body {
-    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
-        'Segoe UI Emoji', 'Segoe UI Symbol';
-    line-height: 1.5;
-    margin: 0;
-}
-* {
-    box-sizing: border-box;
-}
-a {
-    text-decoration: none;
-}
diff --git a/layouts/PostLayout.tsx b/layouts/PostLayout.tsx
index 72753b2c..2d1a7740 100644
--- a/layouts/PostLayout.tsx
+++ b/layouts/PostLayout.tsx
@@ -3,6 +3,8 @@ import Head from 'next/head';
 import * as React from 'react';
 import { Layout } from './Layout';
 
+import { Ad } from '../components/Ad';
+
 export const PostLayout: React.FC<{
     keywords?: string;
     title: string;
@@ -23,6 +25,10 @@ export const PostLayout: React.FC<{
                     <Spacer size="extraLarge" />
                     <Heading level={1}>{title}</Heading>
                     <Spacer size="large" />
+                    <div className="block-ad">
+                        <Ad />
+                    </div>
+                    <Spacer size="medium" />
                 </div>
                 {children}
                 <Spacer size="large" />
diff --git a/public/css/demo.css b/public/css/demo.css
new file mode 100644
index 00000000..22cad5ab
--- /dev/null
+++ b/public/css/demo.css
@@ -0,0 +1,11 @@
+body {
+    font-family: 'Inter', sans-serif;
+    line-height: 1.5;
+    margin: 0;
+}
+* {
+    box-sizing: border-box;
+}
+a {
+    text-decoration: none;
+}
diff --git a/styles/blocks/_ad.scss b/styles/blocks/_ad.scss
new file mode 100644
index 00000000..01e7eb2b
--- /dev/null
+++ b/styles/blocks/_ad.scss
@@ -0,0 +1,22 @@
+.block-ad {
+    background: #e6e6e6;
+    border-radius: 0.25rem;
+    padding: 1rem;
+    margin: 0 auto;
+    max-width: 15rem;
+}
+
+/* Ads */
+.carbon-img {
+    display: block;
+    text-align: center;
+}
+.carbon-poweredby {
+    display: block;
+    font-size: 0.75rem;
+    text-align: right;
+}
+.carbon-text {
+    display: block;
+    font-size: 0.875rem;
+}
diff --git a/styles/index.scss b/styles/index.scss
index 897e807e..76f115ca 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -1,6 +1,7 @@
 @import './reset';
 
 // Blocks
+@import 'blocks/ad';
 @import 'blocks/demo';
 @import 'blocks/footer';
 @import 'blocks/header';