From 2355a5ecaedcfaeb96f6d8e99631f5e4aee600e5 Mon Sep 17 00:00:00 2001
From: Riya Jain <riya1jain567@gmail.com>
Date: Tue, 7 Jan 2025 13:28:09 +0000
Subject: [PATCH] Add BottomNavbar

---
 packages/client/src/Layout.tsx                |  2 ++
 packages/client/src/pages/token/Trader.tsx    |  2 +-
 .../client/src/shared/components/Navbar.tsx   | 28 +++++++++++++++++++
 3 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 packages/client/src/shared/components/Navbar.tsx

diff --git a/packages/client/src/Layout.tsx b/packages/client/src/Layout.tsx
index a6725a7..b0f3e15 100644
--- a/packages/client/src/Layout.tsx
+++ b/packages/client/src/Layout.tsx
@@ -1,9 +1,11 @@
+import Navbar from "./shared/components/Navbar.tsx";
 import type { Children } from "./shared/types/utils.d.ts";
 
 export default function Layout(props: { children: Children }) {
   return (
     <>
       {props.children}
+      <Navbar />
     </>
   );
 }
diff --git a/packages/client/src/pages/token/Trader.tsx b/packages/client/src/pages/token/Trader.tsx
index 9627140..960c88c 100644
--- a/packages/client/src/pages/token/Trader.tsx
+++ b/packages/client/src/pages/token/Trader.tsx
@@ -88,7 +88,7 @@ export default function Trader() {
             setSellAmount(0);
           }}
         >
-          <Icon name="ArrowBigRight" className="size-3" />
+          <Icon name="ArrowRight" className="size-3" />
         </button>
 
         <div className="border border-front/20 p-3 rounded-lg min-h-[15vh]">
diff --git a/packages/client/src/shared/components/Navbar.tsx b/packages/client/src/shared/components/Navbar.tsx
new file mode 100644
index 0000000..acd3a3c
--- /dev/null
+++ b/packages/client/src/shared/components/Navbar.tsx
@@ -0,0 +1,28 @@
+import Icon from "./Icon.tsx";
+
+export default function Navbar() {
+  return (
+    <div className="fixed bottom-0 bg-background justify-between flex w-full py-2 px-4 rounded-t-md text-sm border-t border-border shadow-lg">
+      <div className="flex flex-col items-center">
+        <Icon name="Gem" />
+        <p>Discover</p>
+      </div>
+      <div className="flex flex-col items-center">
+        <Icon name="MessagesSquare" />
+        <p>Chat</p>
+      </div>
+      <div className="flex flex-col items-center">
+        <Icon name="Touchpad" />
+        <p>PFRAX</p>
+      </div>
+      <div className="flex flex-col items-center">
+        <Icon name="Plus" />
+        <p>Create</p>
+      </div>
+      <div className="flex flex-col items-center">
+        <Icon name="Wallet" />
+        <p>Portfolio</p>
+      </div>
+    </div>
+  );
+}