Merge pull request #11 from paragpurandare/master

added a floating bottom navigation bar
yashthipsay · Feb 7, 2024 · b656be9 · b656be9
2 parents 829abba + f5daab0
commit b656be9
Show file tree

Hide file tree

Showing 4 changed files with 5,625 additions and 2 deletions.
diff --git a/frontend/app/components/Navbar.jsx b/frontend/app/components/Navbar.jsx
@@ -0,0 +1,126 @@
+import React, { useState } from 'react';
+
+const Navbar = () => {
+  const [activeTooltip, setActiveTooltip] = useState(null);
+
+  const handleTooltip = (tooltipId) => {
+    setActiveTooltip(activeTooltip === tooltipId ? null : tooltipId);
+  };
+
+  return (
+    <div className="fixed z-50 w-full h-16 max-w-lg -translate-x-1/2 bg-white border border-gray-200 rounded-full bottom-4 left-1/2 dark:bg-gray-700 dark:border-gray-600">
+      <div className="grid h-full max-w-lg grid-cols-5 mx-auto">
+        <button
+          onMouseEnter={() => handleTooltip("tooltip-home")}
+          onMouseLeave={() => handleTooltip("tooltip-home")}
+          type="button"
+          className="inline-flex flex-col items-center justify-center px-5 rounded-s-full hover:bg-gray-50 dark:hover:bg-gray-800 group"
+        >
+          <svg
+            className="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
+          </svg>
+          <span className="sr-only">Home</span>
+        </button>
+        <div id="tooltip-home" role="tooltip" className={`absolute z-10 ${activeTooltip === 'tooltip-home' ? 'visible' : 'invisible'} inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm tooltip dark:bg-gray-700`}>
+          Home
+          <div className="tooltip-arrow" data-popper-arrow></div>
+        </div>
+        <button
+          onMouseEnter={() => handleTooltip("tooltip-wallet")}
+          onMouseLeave={() => handleTooltip("tooltip-wallet")}
+          type="button"
+          className="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group relative"
+        >
+          <svg
+            className="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path d="M11.074 4 8.442.408A.95.95 0 0 0 7.014.254L2.926 4h8.148ZM9 13v-1a4 4 0 0 1 4-4h6V6a1 1 0 0 0-1-1H1a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h17a1 1 0 0 0 1-1v-2h-6a4 4 0 0 1-4-4Z"/>
+            <path d="M19 10h-6a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h6a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1Zm-4.5 3.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2ZM12.62 4h2.78L12.539.41a1.086 1.086 0 1 0-1.7 1.352L12.62 4Z"/>
+          </svg>
+          <span className="sr-only">Wallet</span>
+        </button>
+        <div id="tooltip-wallet" role="tooltip" className={`absolute z-10 ${activeTooltip === 'tooltip-wallet' ? 'visible' : 'invisible'} inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm tooltip dark:bg-gray-700`}>
+          Wallet
+          <div className="tooltip-arrow" data-popper-arrow></div>
+        </div>
+        <div className="flex items-center justify-center">
+          <button
+            onMouseEnter={() => handleTooltip("tooltip-new")}
+            onMouseLeave={() => handleTooltip("tooltip-new")}
+            type="button"
+            className="inline-flex items-center justify-center w-10 h-10 font-medium bg-blue-600 rounded-full hover:bg-blue-700 group focus:ring-4 focus:ring-blue-300 focus:outline-none dark:focus:ring-blue-800 relative"
+          >
+            <svg
+              className="w-4 h-4 text-white"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 18 18"
+            >
+              <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 1v16M1 9h16"/>
+            </svg>
+            <span className="sr-only">New item</span>
+          </button>
+        </div>
+        <div id="tooltip-new" role="tooltip" className={`absolute z-10 ${activeTooltip === 'tooltip-new' ? 'visible' : 'invisible'} inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm tooltip dark:bg-gray-700`}>
+          Create new item
+          <div className="tooltip-arrow" data-popper-arrow></div>
+        </div>
+        <button
+          onMouseEnter={() => handleTooltip("tooltip-settings")}
+          onMouseLeave={() => handleTooltip("tooltip-settings")}
+          type="button"
+          className="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group relative"
+        >
+          <svg
+            className="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 20 20"
+          >
+            <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 12.25V1m0 11.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M4 19v-2.25m6-13.5V1m0 2.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M10 19V7.75m6 4.5V1m0 11.25a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM16 19v-2"/>
+          </svg>
+          <span className="sr-only">Settings</span>
+        </button>
+        <div id="tooltip-settings" role="tooltip" className={`absolute z-10 ${activeTooltip === 'tooltip-settings' ? 'visible' : 'invisible'} inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm tooltip dark:bg-gray-700`}>
+          Settings
+          <div className="tooltip-arrow" data-popper-arrow></div>
+        </div>
+        <button
+          onMouseEnter={() => handleTooltip("tooltip-profile")}
+          onMouseLeave={() => handleTooltip("tooltip-profile")}
+          type="button"
+          className="inline-flex flex-col items-center justify-center px-5 rounded-e-full hover:bg-gray-50 dark:hover:bg-gray-800 group relative"
+        >
+          <svg
+            className="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
+          </svg>
+          <span className="sr-only">Profile</span>
+        </button>
+        <div id="tooltip-profile" role="tooltip" className={`absolute z-10 ${activeTooltip === 'tooltip-profile' ? 'visible' : 'invisible'} inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm tooltip dark:bg-gray-700`}>
+          Profile
+          <div className="tooltip-arrow" data-popper-arrow></div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Navbar;
diff --git a/frontend/app/layout.jsx b/frontend/app/layout.jsx
@@ -4,6 +4,7 @@ import { WalletEntryPosition } from "@particle-network/auth";
 import { Ethereum, EthereumGoerli } from "@particle-network/chains";
 import { evmWallets } from "@particle-network/connect";
 import "./globals.css";
+import Navbar from "./components/Navbar";
 
 export default function RootLayout({ children }) {
   return (
@@ -45,7 +46,9 @@ export default function RootLayout({ children }) {
           "facebook",
         ]}
       >
-        <body>{children}</body>
+        <body>{children}
+        <Navbar />
+        </body>
       </ModalProvider>
     </html>
   );

diff --git a/frontend/jsconfig.json b/frontend/jsconfig.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "jsx": "react",
     "paths": {
-      "@/*": ["./*"]
+      "@*": ["./*"]
     }
   }
 }