[FIN-6] Create Navbar Template

package.json

@@ -17,12 +17,13 @@
     "@types/node": "^18.15.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "firebase": "^9.20.0",
     "bootstrap": "^5.2.3",
     "dayjs": "^1.11.7",
-    "firebase": "^9.17.2",
     "firebaseui": "^0.600.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",
     "sass": "^1.59.2",
     "typescript": "^4.9.5",

src/App.tsx

@@ -1,12 +1,9 @@
-
-import "bootstrap/dist/css/bootstrap.min.css";
-import RFPHistoryPage from 'pages/RFPHistory';
+import NavBar from 'navbar';
 
 function App() {
-
   return (
-    <div className="App">
-      <RFPHistoryPage />
+    <div>
+      <NavBar />
     </div>
   );
 }

src/index.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import ReactDOM from "react-dom";
+import { BrowserRouter } from "react-router-dom";
 import './index.css';
 import App from './App';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App /> 
+    </BrowserRouter>
   </React.StrictMode>,
   document.getElementById("root")
 );

src/navbar/NavBarHeader.tsx

@@ -0,0 +1,22 @@
+import { Tabs } from "@mantine/core";
+import { NavLink } from "react-router-dom";
+
+const navLinks = ["All RFP", "Incoming", "Rejected", "Approved"];
+
+export default function NavBarHeader()
+{
+  return (
+    <Tabs variant="outline" className="nav-tabs">
+      <Tabs.List>
+        {navLinks.map((link) => {
+          var linkValue = link.replace(/\s/g, "").toLowerCase();
+          return (
+            <Tabs.Tab value={linkValue} key={crypto.randomUUID()}>
+              <NavLink to={"rfp/" + linkValue} className="nav-link">{link}</NavLink>
+            </Tabs.Tab>
+          );
+        })}
+      </Tabs.List>
+    </Tabs>
+  );
+};

src/navbar/RfpRoutes.tsx

@@ -0,0 +1,13 @@
+import { Route, Routes } from "react-router";
+
+export function RfpRoutes()
+{
+    return (
+      <Routes>
+        <Route path="/allrfp" element={<h1>All RFP</h1>} />
+        <Route path="/incoming" element={<h1>Incoming RFP</h1>} />
+        <Route path="/rejected" element={<h1>Rejected RFP</h1>} />
+        <Route path="/approved" element={<h1>Approved RFP</h1>} />
+      </Routes>
+    );
+}

src/navbar/index.tsx

@@ -0,0 +1,15 @@
+import { Route, Routes } from "react-router-dom";
+import { RfpRoutes } from "./RfpRoutes";
+import NavBarHeader from "./NavBarHeader";
+import "./style.css";
+
+export default function NavBar() {
+  return (
+    <>
+      <NavBarHeader />
+      <Routes>
+        <Route path="/rfp/*" element={<RfpRoutes />} />
+      </Routes>
+    </>
+  );
+}

src/navbar/style.css

@@ -0,0 +1,14 @@
+.nav-tabs {
+  margin-top: 1rem;
+  padding: 1rem;
+}
+.nav-tabs .nav-link {
+  text-decoration: none;
+  font-size: 1.6rem;
+  padding: 1.5rem;
+  color: #0095FF;
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 500;
+  margin: 1.2rem;
+}/*# sourceMappingURL=style.css.map */

src/navbar/style.scss

@@ -0,0 +1,15 @@
+.nav-tabs {
+    margin-top: 1rem;
+    padding: 1rem;
+
+    .nav-link {
+        text-decoration: none;
+        font-size: 1.6rem;
+        padding: 1.5rem;
+        color: #0095FF;
+        font-family: 'Poppins';
+        font-style: normal;
+        font-weight: 500;
+        margin: 1.2rem;
+    }
+}