From fe68087a11103b291e8a14f454bdff774de1db60 Mon Sep 17 00:00:00 2001
From: ravi-p-k-1 <104999921+ravi-p-k-1@users.noreply.github.com>
Date: Wed, 12 Feb 2025 23:48:04 -0800
Subject: [PATCH] Feature ticket 138 routing configuration (#142)

Added Navbar to router.

Added nested routing.

Added pages:
  - Signup page
  - Display page

---------

Co-authored-by: ravikth <ravi.kakadia@techholding.co>
Co-authored-by: Nakul Bhandare <57669292+nakulbhandare@users.noreply.github.com>
---
 frontend/web-app/src/Components/NavBar.tsx | 10 +++++-
 frontend/web-app/src/Components/Router.tsx | 37 ++++++++++++++++------
 frontend/web-app/src/Pages/DisplayPage.tsx |  9 ++++++
 frontend/web-app/src/Pages/SignUpPage.tsx  |  9 ++++++
 4 files changed, 54 insertions(+), 11 deletions(-)
 create mode 100644 frontend/web-app/src/Pages/DisplayPage.tsx
 create mode 100644 frontend/web-app/src/Pages/SignUpPage.tsx

diff --git a/frontend/web-app/src/Components/NavBar.tsx b/frontend/web-app/src/Components/NavBar.tsx
index 7976298..5289f58 100644
--- a/frontend/web-app/src/Components/NavBar.tsx
+++ b/frontend/web-app/src/Components/NavBar.tsx
@@ -1,8 +1,16 @@
 import React from 'react'
+import { Link, Outlet } from 'react-router-dom';
 
 function NavBar() {
   return (
-    <div>NavBar</div>
+    <div>
+      <div>
+        <Link to="/">Home</Link>
+        <Link to="/about">About</Link>
+        <Link to="/faq">FAQ</Link>
+      </div>
+      <Outlet />
+    </div>
   )
 };
 
diff --git a/frontend/web-app/src/Components/Router.tsx b/frontend/web-app/src/Components/Router.tsx
index 3dd0cde..cf6e218 100644
--- a/frontend/web-app/src/Components/Router.tsx
+++ b/frontend/web-app/src/Components/Router.tsx
@@ -5,6 +5,9 @@ import PlantDetailPage from "../Pages/PlantDetailPage";
 import AboutPage from "../Pages/AboutPage";
 import FaqPage from "../Pages/FaqPage";
 import ErrorPage from "../Pages/ErrorPage";
+import NavBar from "./NavBar";
+import SignUpPage from "../Pages/SignUpPage";
+import DisplayPage from "../Pages/DisplayPage";
 
 const router = createBrowserRouter([
     {
@@ -15,21 +18,35 @@ const router = createBrowserRouter([
         element: <LoginPage/>,
     },
     {
-        path: '/',
-        element: <HomePage/>,
+        path: '/signup',
+        element: <SignUpPage />,
     },
     {
-        path: '/plant_detail',
-        element: <PlantDetailPage/>,
+        path: '/display',
+        element: <DisplayPage />
     },
     {
-        path: '/about',
-        element: <AboutPage />,
+        path: '/',
+        element: <NavBar />,
+        children: [
+            {
+                path: '/',
+                element: <HomePage/>,
+            },
+            {
+                path: '/plant_detail',
+                element: <PlantDetailPage/>,
+            },
+            {
+                path: '/about',
+                element: <AboutPage />,
+            },
+            {
+                path: '/faq',
+                element: <FaqPage />,
+            }
+        ]
     },
-    {
-        path: '/faq',
-        element: <FaqPage />,
-    }
 ]);
 
 function Provider() {
diff --git a/frontend/web-app/src/Pages/DisplayPage.tsx b/frontend/web-app/src/Pages/DisplayPage.tsx
new file mode 100644
index 0000000..d40f6e9
--- /dev/null
+++ b/frontend/web-app/src/Pages/DisplayPage.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function DisplayPage() {
+  return (
+    <div>DisplayPage</div>
+  )
+}
+
+export default DisplayPage
\ No newline at end of file
diff --git a/frontend/web-app/src/Pages/SignUpPage.tsx b/frontend/web-app/src/Pages/SignUpPage.tsx
new file mode 100644
index 0000000..ffec4e8
--- /dev/null
+++ b/frontend/web-app/src/Pages/SignUpPage.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function SignUpPage() {
+  return (
+    <div>SignUpPage</div>
+  )
+}
+
+export default SignUpPage
\ No newline at end of file