Add ad to post's layout

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} />;
+};

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" />

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;
+}

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;
+}

styles/index.scss

@@ -1,6 +1,7 @@
 @import './reset';
 
 // Blocks
+@import 'blocks/ad';
 @import 'blocks/demo';
 @import 'blocks/footer';
 @import 'blocks/header';