add ads component

Author: tam315

frontend/.env.development

@@ -1 +1,3 @@
-NEXT_PUBLIC_API_URL=http://localhost:8080
+NEXT_PUBLIC_API_URL=http://localhost:8080
+NEXT_PUBLIC_GOOGLE_AD_CLIENT=ca-pub-7134126650568891
+NEXT_PUBLIC_GOOGLE_AD_SLOT=2983860255

frontend/.env.production

@@ -1 +1,3 @@
-NEXT_PUBLIC_API_URL=https://pairwise-api.yuuniworks.com
+NEXT_PUBLIC_API_URL=https://pairwise-api.yuuniworks.com
+NEXT_PUBLIC_GOOGLE_AD_CLIENT=ca-pub-7134126650568891
+NEXT_PUBLIC_GOOGLE_AD_SLOT=2983860255

frontend/src/features/ads/AdCard.tsx

@@ -0,0 +1,25 @@
+import React, { useEffect } from 'react';
+
+interface IProps {}
+
+export const AdCard: React.FC<IProps> = ({}) => {
+  useEffect(() => {
+    if (!process.browser) {
+      return;
+    }
+    if (!window.adsbygoogle) {
+      window.adsbygoogle = [];
+    }
+    window.adsbygoogle.push({});
+  }, []);
+
+  return (
+    <ins
+      className="adsbygoogle"
+      style={{ display: 'inline-block', width: '1200px', height: '90px' }}
+      data-ad-client={process.env.NEXT_PUBLIC_GOOGLE_AD_CLIENT}
+      data-ad-slot={process.env.NEXT_PUBLIC_GOOGLE_AD_SLOT}
+      data-full-width-responsive="true"
+    ></ins>
+  );
+};

frontend/src/features/top/Top.module.css

@@ -1,8 +1,9 @@
+import { css } from 'emotion';
 import React, { useCallback, useState } from 'react';
 import { Button } from '../../components/Button';
 import { Textarea } from '../../components/Textarea';
+import { AdCard } from '../ads/AdCard';
 import { Header } from '../header';
-import style from './Top.module.css';
 
 export const Top = () => {
   const [isFetching, setIsFetching] = useState(false);
@@ -25,10 +26,57 @@ export const Top = () => {
       .finally(() => setIsFetching(false));
   }, [factorText]);
 
+  const style = {
+    rootContainer: css`
+      background: #fafafa;
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      width: 100vw;
+    `,
+    description: css`
+      padding: 0 1rem;
+      margin-top: 1rem;
+      line-height: 1.8;
+    `,
+    converterRow: css`
+      align-items: stretch;
+      display: flex;
+      flex: 1 0; /* expand */
+      justify-content: space-between;
+      padding: 1rem;
+    `,
+    adsRow: css`
+      flex: 0 0 90px;
+      margin-top: 1rem;
+      overflow: hidden;
+      text-align: center;
+    `,
+    factors: css`
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    `,
+    results: css`
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    `,
+    download: css`
+      display: block;
+      margin: 0.5rem 0 1rem;
+      text-align: center;
+    `,
+  };
+
   return (
     <div className={style.rootContainer}>
       <Header />
 
+      <div className={style.adsRow}>
+        <AdCard />
+      </div>
+
       <div className={style.description}>
         An online service that easily generates pair-wise test cases.
         <br />
@@ -37,7 +85,7 @@ export const Top = () => {
         hood.
       </div>
 
-      <div className={style.row}>
+      <div className={style.converterRow}>
         <div className={style.factors}>
           <Textarea
             aria-label="factors"

frontend/src/features/top/Top.tsx

@@ -4,6 +4,12 @@ import React from 'react';
 import { AdBlockGuard } from '../features/ads/AdBlockGuard';
 import './global.css';
 
+declare global {
+  interface Window {
+    adsbygoogle: any;
+  }
+}
+
 function App({ Component, pageProps }: AppProps) {
   return (
     <>