feat(pub): addvertical publicity banner

Charlie85270 · Oct 25, 2021 · 09c68f7 · 09c68f7
1 parent ef15be1
commit 09c68f7
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 4 deletions.
diff --git a/components/layout/AppLayout.tsx b/components/layout/AppLayout.tsx
@@ -1,6 +1,7 @@
 import FooterLight from '../kit/components/navigation/footer/FooterLight';
 import Meta from '../site/Meta';
 import AppHeader from '../site/header/AppHeader';
+import AdBanner from '../site/Pub/Banner';
 
 const footerLink = [
     {
@@ -71,20 +72,26 @@ export const menuTemplates = [
 interface Props {
     title: string;
     desc: string;
+    withPub?: boolean;
     children: React.ReactNode;
 }
 
-const AppLayout = ({ title, desc, children }: Props) => {
+const AppLayout = ({ title, desc, children, withPub }: Props) => {
     return (
         <div className="relative bg-white ">
             <Meta pageTitle={title} description={desc} />
             <div className="mx-auto h-full" style={{ minHeight: 85 + 'vh' }}>
-                <div className="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:w-full lg:pb-28 xl:pb-32 h-full">
+                <div className="relative z-10 pb-8 bg-white overflow-hidden sm:pb-16 md:pb-20 lg:w-full lg:pb-28 xl:pb-32 h-full">
                     <div className="dark">
                         <AppHeader />
                     </div>
 
                     <main className="mx-auto max-w-7xl px-4 mt-8 sm:px-6  lg:px-8 h-full">{children}</main>
+                    {withPub && (
+                        <div className="px-2 mt-8 w-60 right-0 top-0 pr-4 pt-32 xs:hidden 2xl:absolute">
+                            <AdBanner isVertical />
+                        </div>
+                    )}
                 </div>
             </div>
             <div className="dark">

diff --git a/components/site/Pub/Banner.tsx b/components/site/Pub/Banner.tsx
@@ -1,6 +1,10 @@
 import React, { useEffect } from 'react';
 
-const AdBanner = () => {
+interface Props {
+    isVertical?: boolean;
+}
+
+const AdBanner = ({ isVertical }: Props) => {
     useEffect(() => {
         try {
             ((window as any).adsbygoogle = (window as any).adsbygoogle || []).push({});
@@ -16,7 +20,7 @@ const AdBanner = () => {
             data-ad-format="fluid"
             data-ad-layout-key="-6t+ed+2i-1n-4w"
             data-ad-client="ca-pub-9198515375847190"
-            data-ad-slot="5049524770"
+            data-ad-slot={isVertical ? '7214868435' : '5049524770'}
         ></ins>
     );
 };

diff --git a/pages/components/index.tsx b/pages/components/index.tsx
@@ -10,6 +10,7 @@ import ListPage from '../../components/kit/components/list';
 const ComponentsPage: FC = () => {
     return (
         <AppLayout
+            withPub
             title="Tailwind UI KIT – Components section for React, VueJS and Angular."
             desc="Over 200 free and open source components for tailwind css, with live code edition to build beautiful UI"
         >

diff --git a/pages/started/index.tsx b/pages/started/index.tsx
@@ -43,6 +43,7 @@ const confCode = `module.exports = {
 const StartedPage: FC = () => {
     return (
         <AppLayout
+            withPub
             title="Configuration to use Tail-Kit for tailwind components"
             desc="Over 200 freen and open source build components for tailwind css"
         >

diff --git a/pages/templates/index.tsx b/pages/templates/index.tsx
@@ -7,6 +7,7 @@ import DashboardPages from '../../components/kit/templates/dashboardPages';
 const ComponentsPage: FC = () => {
     return (
         <AppLayout
+            withPub
             title="Tailwind UI KIT – Free and open source templates and dashboard UI for React, VueJS and Angular."
             desc="Over 250 free and open source components and templates for tailwind css, with live code edition to build beautiful UI"
         >