feat(dapp): add banner

Signed-off-by: Urban Vidovič <urbanfoundit@gmail.com>
blockchain-lab-um · Apr 23, 2024 · 4c6a248 · 4c6a248
1 parent 9986d17
commit 4c6a248
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 19 deletions.
diff --git a/packages/dapp/src/app/[locale]/(public)/layout.tsx b/packages/dapp/src/app/[locale]/(public)/layout.tsx
@@ -1,3 +1,4 @@
+import Banner from '@/components/Banner';
 import PublicFooter from '@/components/PublicFooter';
 import PublicNavbar from '@/components/PublicNavbar';
 
@@ -7,17 +8,22 @@ export default async function PublicLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="flex flex-col h-screen px-4 sm:px-12">
-      <div className="m-0 p-6 sm:px-12">
-        <PublicNavbar />
+    <div className="flex flex-col h-screen">
+      <div>
+        <Banner />
       </div>
-      <div className="flex flex-1">
-        <div className="flex flex-1 items-center justify-center overflow-auto">
-          {children}
+      <div className="h-full flex flex-col px-4 sm:px-12">
+        <div className="m-0 p-6 sm:px-12">
+          <PublicNavbar />
+        </div>
+        <div className="flex flex-1">
+          <div className="flex flex-1 items-center justify-center overflow-auto">
+            {children}
+          </div>
+        </div>
+        <div className="relative bottom-0 left-0 right-0 p-6 max-md:hidden sm:px-12">
+          <PublicFooter setIsMenuOpen={null} />
         </div>
-      </div>
-      <div className="relative bottom-0 left-0 right-0 p-6 max-md:hidden sm:px-12">
-        <PublicFooter setIsMenuOpen={null} />
       </div>
     </div>
   );

diff --git a/packages/dapp/src/app/[locale]/app/layout.tsx b/packages/dapp/src/app/[locale]/app/layout.tsx
@@ -6,6 +6,7 @@ import { SignInModal } from '@/components/SignInModal';
 import ToastWrapper from '@/components/ToastWrapper';
 import { Providers } from '@/components/Providers';
 import { ScrollShadow } from '@nextui-org/react';
+import Banner from '@/components/Banner';
 
 export default async function AppLayout({
   children,
@@ -14,17 +15,22 @@ export default async function AppLayout({
 }) {
   return (
     <Providers>
-      <div className="flex flex-col h-screen px-4 pb-6 sm:px-12">
-        <div className="p-6 m-0 sm:px-2 max-sm:py-2">
-          <AppNavbar />
+      <div className="flex flex-col h-screen pb-6">
+        <div>
+          <Banner />
+        </div>
+        <div className="flex flex-col h-full px-4 pb-6 sm:px-12">
+          <div className="p-6 m-0 sm:px-2 max-sm:py-2">
+            <AppNavbar />
+          </div>
+          <ScrollShadow
+            className="flex h-full w-full flex-col py-6 px-2 main-bg max-sm:mb-12"
+            hideScrollBar
+            size={8}
+          >
+            {children}
+          </ScrollShadow>
         </div>
-        <ScrollShadow
-          className="flex h-full w-full flex-col py-6 px-2 main-bg max-sm:mb-12"
-          hideScrollBar
-          size={8}
-        >
-          {children}
-        </ScrollShadow>
       </div>
       <AppBottomBar />
       <SignInModal />

diff --git a/packages/dapp/src/components/Banner/index.tsx b/packages/dapp/src/components/Banner/index.tsx
@@ -0,0 +1,21 @@
+import { Link } from '@nextui-org/react';
+
+export default function Banner() {
+  return (
+    <div className="bg-pink-200 text-center dark:bg-navy-blue-800">
+      <div className="container mx-auto px-4">
+        <p>
+          Support Masca on{' '}
+          <Link
+            className="animate-pulse"
+            target="_blank"
+            href="https://explorer.gitcoin.co/#/round/42161/25/162"
+          >
+            Gitcoin Grants
+          </Link>
+          !
+        </p>
+      </div>
+    </div>
+  );
+}