Setup ads

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;

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