chore: update ad container

omsimos · Feb 20, 2024 · 17140de · 17140de
1 parent 3acaef9
commit 17140de
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 49 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -47,6 +47,7 @@
     "reflect-metadata": "^0.1.13",
     "remark-gfm": "^3.0.1",
     "sharp": "^0.31.3",
+    "tailwind-merge": "^2.2.1",
     "type-graphql": "2.0.0-beta.3",
     "zod": "^3.17.3"
   },

diff --git a/apps/web/src/components/AdContainer.tsx b/apps/web/src/components/AdContainer.tsx
@@ -1,11 +1,14 @@
 import React, { useEffect } from 'react';
+import { twMerge } from 'tailwind-merge';
 
 interface Props {
   slotId: string;
   className?: string;
+  test?: boolean;
+  type?: 'display' | 'in-feed';
 }
 
-const AdContainer = ({ slotId, className }: Props) => {
+const AdContainer = ({ slotId, className, test, type = 'display' }: Props) => {
   useEffect(() => {
     if (process.env.NODE_ENV === 'production') {
       if (typeof window !== 'undefined') {
@@ -15,14 +18,24 @@ const AdContainer = ({ slotId, className }: Props) => {
   }, []);
 
   return (
-    <div className={className}>
-      <ins
-        className='adsbygoogle block'
-        data-ad-client='ca-pub-4274133898976040'
-        data-ad-slot={slotId}
-        data-ad-format='auto'
-        data-full-width-responsive='true'
-      />
+    <div className={twMerge(className, test && 'h-24 bg-blue-200')}>
+      {type === 'in-feed' ? (
+        <ins
+          className='adsbygoogle block'
+          data-ad-client='ca-pub-4274133898976040'
+          data-ad-slot={slotId}
+          data-ad-format='fluid'
+          data-ad-layout-key='-fb+5w+4e-db+86'
+        />
+      ) : (
+        <ins
+          className='adsbygoogle block'
+          data-ad-client='ca-pub-4274133898976040'
+          data-ad-slot={slotId}
+          data-ad-format='auto'
+          data-full-width-responsive='true'
+        />
+      )}
     </div>
   );
 };

diff --git a/apps/web/src/components/FeedAdContainer.tsx b/apps/web/src/components/FeedAdContainer.tsx
diff --git a/apps/web/src/pages/global.tsx b/apps/web/src/pages/global.tsx
@@ -18,9 +18,6 @@ import type { NextPageWithLayout } from '..';
 const AdContainer = dynamic(() => import('@/components/AdContainer'), {
   ssr: false,
 });
-const FeedAdContainer = dynamic(() => import('@/components/FeedAdContainer'), {
-  ssr: false,
-});
 
 const Global: NextPageWithLayout = () => {
   const [sendGlobalModal, setSendGlobalModal] = useState(false);
@@ -82,15 +79,15 @@ const Global: NextPageWithLayout = () => {
                 <p className='mt-4'>
                   🎉 Huge update coming to <strong>Umamin Global</strong>!
                 </p>
-                <p className='text-secondary-400 mt-5 border-t border-secondary-100 pt-5'>
+                <p className='text-secondary-400 border-secondary-100 mt-5 border-t pt-5'>
                   Follow us for updates:
                 </p>
 
                 <div className='mt-2 flex space-x-4'>
                   <Link
                     className='flex items-center space-x-2 leading-none'
                     href='https://www.instagram.com/umamin.app/'
-                    target="_blank"
+                    target='_blank'
                   >
                     <BsInstagram className='text-primary-300' />
                     <p>@umamin.app</p>
@@ -99,7 +96,7 @@ const Global: NextPageWithLayout = () => {
                   <Link
                     className='flex items-center space-x-2 leading-none'
                     href='https://www.facebook.com/umamin.official/'
-                    target="_blank"
+                    target='_blank'
                   >
                     <BsFacebook className='text-primary-300' />
                     <p>@umamin.official</p>
@@ -145,11 +142,15 @@ const Global: NextPageWithLayout = () => {
               {messageData && (
                 <GlobalPost message={messageData} key={messageData.id} />
               )}
-              {messages?.map((m) => (
-                <GlobalPost message={m} key={m?.id} />
-              ))}
+              {messages?.map((m, i) => (
+                <div key={m?.id}>
+                  {(i + 1) % 5 === 0 && (
+                    <AdContainer slotId='1966757556' test className='mb-12' />
+                  )}
 
-              <FeedAdContainer slotId='1966757556' className='my-4' />
+                  <GlobalPost message={m} />
+                </div>
+              ))}
             </div>
 
             <Container className='mt-12 grid place-items-center'>

diff --git a/yarn.lock b/yarn.lock
@@ -1163,6 +1163,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.23.7":
+  version "7.23.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
+  integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.18.10":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.5.tgz#0c8c4d944509875849bd0344ff0050756eefc6ec"
@@ -7607,6 +7614,11 @@ regenerator-runtime@^0.13.4:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
   integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
 regenerator-transform@^0.15.0:
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.0.tgz#cbd9ead5d77fae1a48d957cf889ad0586adb6537"
@@ -8311,6 +8323,13 @@ swap-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
+tailwind-merge@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.2.1.tgz#3f10f296a2dba1d88769de8244fafd95c3324aeb"
+  integrity sha512-o+2GTLkthfa5YUt4JxPfzMIpQzZ3adD1vLVkvKE1Twl9UAhGsEbIZhHHZVRttyW177S8PDJI3bTQNaebyofK3Q==
+  dependencies:
+    "@babel/runtime" "^7.23.7"
+
 tailwindcss@^3.1.4:
   version "3.1.7"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.1.7.tgz#ce99425f30a74e01457a2e6a724463b0df3159ac"