feat: support different banners

hyochan · Sep 20, 2023 · 4311c57 · 4311c57 · vercel · Sep 20, 2023
1 parent 1bc65aa
commit 4311c57
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 59 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -27,6 +27,7 @@
   "typescript.preferences.importModuleSpecifier": "relative",
   "prettier.configPath": ".prettierrc.js",
   "cSpell.words": [
+    "adfit",
     "clsx",
     "formatjs",
     "hyochan",

diff --git a/app/[lang]/(common)/AdFitResponsive.tsx b/app/[lang]/(common)/AdFitResponsive.tsx
@@ -5,9 +5,16 @@ import AdFit from './AdFit';
 import {useEffect, useState} from 'react';
 
 export default function AdFitResponsive({
+  units,
   className,
+  adfitClassName,
 }: {
   className?: string;
+  units: {
+    mobile: string;
+    pc: string;
+  }
+  adfitClassName: string,
 }): JSX.Element {
   const isMobile = useMediaQuery('(max-width: 768px)');
   const [loaded, setLoaded] = useState(false);
@@ -33,10 +40,10 @@ export default function AdFitResponsive({
       {!isMobile ? (
         <div>
           <AdFit
-            unit="DAN-SEcRVdSHkh05H0jO"
+            unit={units.pc}
             height={90}
             width={728}
-            className="adfit-top-mobile"
+            className={adfitClassName}
             style={{
               flex: 1,
             }}
@@ -46,10 +53,10 @@ export default function AdFitResponsive({
       {isMobile ? (
         <div>
           <AdFit
-            unit="DAN-dAqcoLWvKpYEtbtq"
+            unit={units.mobile}
             height={100}
             width={320}
-            className="adfit-top-mobile"
+            className={`${adfitClassName}-mobile`}
             style={{
               flex: 1,
             }}

diff --git a/app/[lang]/(home)/Hero/index.tsx b/app/[lang]/(home)/Hero/index.tsx
@@ -17,7 +17,7 @@ import TextInput from '../../(common)/TextInput';
 
 import StatsSymbols from './StatsSymbol';
 import StatsUrlCard from './StatsUrlCards';
-import { useMediaQuery } from 'usehooks-ts';
+import {useMediaQuery} from 'usehooks-ts';
 import AdFit from '../../(common)/AdFit';
 import AdFitResponsive from '../../(common)/AdFitResponsive';
 
@@ -59,7 +59,7 @@ function Hero({t, statsInfo}: Props): ReactElement {
     },
   ];
 
-  const isMobile = useMediaQuery('(max-width: 768px)')
+  const isMobile = useMediaQuery('(max-width: 768px)');
   const [selectedPluginType, setSelectedPluginType] = useState(statTypes[0]);
   const [login, setLogin] = useState('');
   const [searchLogin, setSearchedUID] = useState('');
@@ -116,7 +116,14 @@ function Hero({t, statsInfo}: Props): ReactElement {
           {t.developerPowerMeterDesc}
         </p>
         {/* Begin: AdFit */}
-        <AdFitResponsive className='mb-6'/>
+        <AdFitResponsive
+          className="mb-6"
+          adfitClassName="adfit-top"
+          units={{
+            mobile: 'DAN-dAqcoLWvKpYEtbtq',
+            pc: 'DAN-SEcRVdSHkh05H0jO',
+          }}
+        />
         {/* End: AdFit */}
         {/* Begin: Search Form */}
         <form

diff --git a/app/[lang]/(home)/SectionFooter.tsx b/app/[lang]/(home)/SectionFooter.tsx
@@ -6,8 +6,9 @@ import type {Translates} from '../../../src/localization';
 
 import imgBgSection1 from '@/public/assets/bg_section1.png';
 import SvgScouter from '@/public/assets/scouter.svg';
-import { useMediaQuery } from 'usehooks-ts';
+import {useMediaQuery} from 'usehooks-ts';
 import AdFit from '../(common)/AdFit';
+import AdFitResponsive from '../(common)/AdFitResponsive';
 
 const inter = Inter({subsets: ['latin']});
 
@@ -16,7 +17,7 @@ type Props = {
 };
 
 export default function SectionFooter({t}: Props): ReactElement {
-  const isMobile = useMediaQuery('(max-width: 768px)')
+  const isMobile = useMediaQuery('(max-width: 768px)');
 
   return (
     <div
@@ -74,34 +75,14 @@ export default function SectionFooter({t}: Props): ReactElement {
         </div>
       </div>
       {/* Begin: AdFit */}
-      {!isMobile ? (
-        <div>
-          <AdFit
-            unit="DAN-SEcRVdSHkh05H0jO"
-            height={90}
-            width={728}
-            className="adfit-bottom"
-            style={{
-              flex: 1,
-              marginBottom: 80,
-            }}
-          />
-        </div>
-      ) : null}
-      {isMobile ? (
-        <div>
-          <AdFit
-            unit="DAN-dAqcoLWvKpYEtbtq"
-            height={100}
-            width={320}
-            className="adfit-bottom-mobile"
-            style={{
-              flex: 1,
-              marginBottom: 80,
-            }}
-          />
-        </div>
-      ) : null}
+      <AdFitResponsive
+        adfitClassName="adfit-bottom"
+        className="mb-20"
+        units={{
+          mobile: 'DAN-GfeJUqhlQ5KqCOzw',
+          pc: 'DAN-9eecqcxVgP9XX0bN',
+        }}
+      />
       {/* End: AdFit */}
     </div>
   );

diff --git a/app/[lang]/recent-list/page.tsx b/app/[lang]/recent-list/page.tsx
@@ -35,11 +35,12 @@ export default async function Page({
 
   return (
     <div className={clsx('flex-1 bg-paper overflow-hidden', 'flex flex-col')}>
-      <div className='
+      <div
+        className="
         mt-4 mb-[32px] ml-6 mr-2
         flex-row items-center justify-between
         max-[480px]:mb-0 max-[480px]:my-4
-      '
+      "
       >
         <H1
           className={clsx(
@@ -51,7 +52,14 @@ export default async function Page({
         >
           {recentList.title}
         </H1>
-        <AdFitResponsive className='mx-6 mb-2'/>
+        <AdFitResponsive
+          className="mx-6 mb-2"
+          adfitClassName="adfit-top"
+          units={{
+            mobile: 'DAN-dAqcoLWvKpYEtbtq',
+            pc: 'DAN-SEcRVdSHkh05H0jO',
+          }}
+        />
       </div>
       <GithubUserList
         initialData={userPlugins as UserListItem[]}

diff --git a/app/[lang]/sign-in/page.tsx b/app/[lang]/sign-in/page.tsx
@@ -53,7 +53,14 @@ export default async function Page({
         'flex flex-col justify-center items-center',
       )}
     >
-      <AdFitResponsive className='mx-6 mb-8'/>
+      <AdFitResponsive
+        className="mx-6 mb-8"
+        adfitClassName="adfit-top"
+        units={{
+          mobile: 'DAN-dAqcoLWvKpYEtbtq',
+          pc: 'DAN-SEcRVdSHkh05H0jO',
+        }}
+      />
       <div
         className={clsx(
           'bg-modal max-w-[480px] rounded-2xl px-12 py-16',

diff --git a/app/[lang]/stats/[login]/Scouter/index.tsx b/app/[lang]/stats/[login]/Scouter/index.tsx
@@ -45,7 +45,13 @@ export default function Scouter(props: ScouterProps): ReactElement {
           setSelectedStat(name);
         }}
       />
-      <AdFitResponsive/>
+      <AdFitResponsive
+        adfitClassName="adfit-top"
+        units={{
+          mobile: 'DAN-dAqcoLWvKpYEtbtq',
+          pc: 'DAN-SEcRVdSHkh05H0jO',
+        }}
+      />
       <StatsDetails {...props} selectedStat={selectedStat} />
     </div>
   );

diff --git a/app/[lang]/stats/page.tsx b/app/[lang]/stats/page.tsx
@@ -20,7 +20,14 @@ export default async function Page({
       <div className="max-[480px]:pt-10 max-[480px]:px-6">
         <p className="text-dark dark:text-paper-light">{t.searchUserHint}.</p>
       </div>
-      <AdFitResponsive className="mt-8 max-[480px]:px-6" />
+      <AdFitResponsive
+        className="mt-8 max-[480px]:px-6"
+        adfitClassName="adfit-top"
+        units={{
+          mobile: 'DAN-dAqcoLWvKpYEtbtq',
+          pc: 'DAN-SEcRVdSHkh05H0jO',
+        }}
+      />
     </Container>
   );
 }
diff --git a/styles/output.css b/styles/output.css
@@ -2256,14 +2256,6 @@ input[type='search']::-webkit-search-decoration,
     display: none;
   }
 
-  .max-\[480px\]\:p-6 {
-    padding: 1.5rem;
-  }
-
-  .max-\[480px\]\:p-2 {
-    padding: 0.5rem;
-  }
-
   .max-\[480px\]\:px-0 {
     padding-left: 0px;
     padding-right: 0px;
@@ -2274,14 +2266,6 @@ input[type='search']::-webkit-search-decoration,
     padding-right: 1.5rem;
   }
 
-  .max-\[480px\]\:pt-6 {
-    padding-top: 1.5rem;
-  }
-
-  .max-\[480px\]\:pt-12 {
-    padding-top: 3rem;
-  }
-
   .max-\[480px\]\:pt-10 {
     padding-top: 2.5rem;
   }