From 9ca5f12aa9f0301ca7f32f287e5d126779cc0f4d Mon Sep 17 00:00:00 2001
From: Sang Kim <nonvis@gmail.com>
Date: Mon, 10 Jun 2024 11:24:02 +0900
Subject: [PATCH] Add a banner

---
 app/src/components/layouts/TopNavbar.tsx | 32 +++++++++++++++---------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/app/src/components/layouts/TopNavbar.tsx b/app/src/components/layouts/TopNavbar.tsx
index a8c5ca2..4f07c82 100644
--- a/app/src/components/layouts/TopNavbar.tsx
+++ b/app/src/components/layouts/TopNavbar.tsx
@@ -8,18 +8,26 @@ export const TopNavbar = () => {
   const { address } = useZkLogin();
 
   return (
-    <div className="backdrop-blur-md md:backdrop-blur-none sticky top-0 flex w-full h-full bg-inherit p-5 space-x-2 md:space-x-4 justify-between items-center z-10">
-      <Link href="/new" className="w-[min-content] md:w-[300px] text-2xl font-bold text-white">
-        Mysten Blackjack
-      </Link>
-      <div className="flex flex-1 justify-end items-center space-x-1">
-        {!!address && (
-          <div className="flex space-x-2 items-center">
-            <Balance />
-            <UserProfileMenu />
-          </div>
-        )}
+    <>
+      <div className={`fixed top-0 w-full flex justify-evenly z-30 transition-all`}>
+        <div className="mx-5 flex h-16 items-center justify-end text-white ">
+          <span>[Mysten Blackjack] is provided for testnet purposes only and do not involve real money or the opportunity to win real money.</span>
+        </div>
       </div>
-    </div>
+      <div
+        className="backdrop-blur-md md:backdrop-blur-none w-full h-full bg-inherit p-5 space-x-2 md:space-x-4 justify-between items-center z-10">
+        <Link href="/new" className="w-[min-content] md:w-[300px] text-2xl font-bold text-white">
+          Mysten Blackjack
+        </Link>
+        <div className="flex flex-1 justify-end items-center space-x-1">
+          {!!address && (
+            <div className="flex space-x-2 items-center">
+              <Balance/>
+              <UserProfileMenu/>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
   );
 };