From 17f3ff0d6fe8a95edf5d0f7c17909e34115161c0 Mon Sep 17 00:00:00 2001 From: Shota Tamura Date: Thu, 30 Jul 2020 17:40:16 +0900 Subject: [PATCH 01/10] add ads component --- frontend/.env.development | 4 +- frontend/.env.production | 4 +- frontend/src/features/ads/AdCard.tsx | 25 ++++++++++++ frontend/src/features/top/Top.module.css | 39 ------------------ frontend/src/features/top/Top.tsx | 52 +++++++++++++++++++++++- frontend/src/pages/_app.tsx | 6 +++ 6 files changed, 87 insertions(+), 43 deletions(-) create mode 100644 frontend/src/features/ads/AdCard.tsx delete mode 100644 frontend/src/features/top/Top.module.css diff --git a/frontend/.env.development b/frontend/.env.development index cc53660..cd36707 100644 --- a/frontend/.env.development +++ b/frontend/.env.development @@ -1 +1,3 @@ -NEXT_PUBLIC_API_URL=http://localhost:8080 \ No newline at end of file +NEXT_PUBLIC_API_URL=http://localhost:8080 +NEXT_PUBLIC_GOOGLE_AD_CLIENT=ca-pub-7134126650568891 +NEXT_PUBLIC_GOOGLE_AD_SLOT=2983860255 \ No newline at end of file diff --git a/frontend/.env.production b/frontend/.env.production index c9b6a18..2930c3b 100644 --- a/frontend/.env.production +++ b/frontend/.env.production @@ -1 +1,3 @@ -NEXT_PUBLIC_API_URL=https://pairwise-api.yuuniworks.com \ No newline at end of file +NEXT_PUBLIC_API_URL=https://pairwise-api.yuuniworks.com +NEXT_PUBLIC_GOOGLE_AD_CLIENT=ca-pub-7134126650568891 +NEXT_PUBLIC_GOOGLE_AD_SLOT=2983860255 \ No newline at end of file diff --git a/frontend/src/features/ads/AdCard.tsx b/frontend/src/features/ads/AdCard.tsx new file mode 100644 index 0000000..a7038fc --- /dev/null +++ b/frontend/src/features/ads/AdCard.tsx @@ -0,0 +1,25 @@ +import React, { useEffect } from 'react'; + +interface IProps {} + +export const AdCard: React.FC = ({}) => { + useEffect(() => { + if (!process.browser) { + return; + } + if (!window.adsbygoogle) { + window.adsbygoogle = []; + } + window.adsbygoogle.push({}); + }, []); + + return ( + + ); +}; diff --git a/frontend/src/features/top/Top.module.css b/frontend/src/features/top/Top.module.css deleted file mode 100644 index a6087ed..0000000 --- a/frontend/src/features/top/Top.module.css +++ /dev/null @@ -1,39 +0,0 @@ -.rootContainer { - background: #fafafa; - display: flex; - flex-direction: column; - height: 100vh; - width: 100vw; -} - -.description { - padding: 0 1rem; - margin-top: 1rem; - line-height: 1.8; -} - -.row { - align-items: stretch; - display: flex; - flex: 1 1; /* expand */ - justify-content: space-between; - padding: 1rem; -} - -.factors { - display: flex; - flex-direction: column; - flex: 1; -} - -.results { - display: flex; - flex-direction: column; - flex: 1; -} - -.download { - display: block; - margin: 0.5rem 0 1rem; - text-align: center; -} diff --git a/frontend/src/features/top/Top.tsx b/frontend/src/features/top/Top.tsx index db5d696..812478c 100644 --- a/frontend/src/features/top/Top.tsx +++ b/frontend/src/features/top/Top.tsx @@ -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 (
+
+ +
+
An online service that easily generates pair-wise test cases.
@@ -37,7 +85,7 @@ export const Top = () => { hood.
-
+