Update navigation to link search to /search route

Author: elainefan331

src/components/Routes.tsx

@@ -3,32 +3,36 @@ import DatabasePage from "pages/DatabasePage";
 import DatasetDetailPage from "pages/DatasetDetailPage";
 import DatasetPage from "pages/DatasetPage";
 import Home from "pages/Home";
+import SearchPage from "pages/SearchPage";
 import React from "react";
 import { Navigate, Route, Routes as RouterRoutes } from "react-router-dom";
 import RoutesEnum from "types/routes.enum";
 
 const Routes = () => (
-	<RouterRoutes>
-		{/* FullScreen Layout */}
-		<Route element={<FullScreen />}>
-			{/* Home Page */}
-			<Route path={RoutesEnum.HOME} element={<Home />} />
-			{/* Databases Page */}
-			<Route path={RoutesEnum.DATABASES} element={<DatabasePage />} />
+  <RouterRoutes>
+    {/* FullScreen Layout */}
+    <Route element={<FullScreen />}>
+      {/* Home Page */}
+      <Route path={RoutesEnum.HOME} element={<Home />} />
+      {/* Databases Page */}
+      <Route path={RoutesEnum.DATABASES} element={<DatabasePage />} />
 
-			{/* Dataset List Page */}
-			<Route
-				path={`${RoutesEnum.DATABASES}/:dbName`}
-				element={<DatasetPage />}
-			/>
+      {/* Dataset List Page */}
+      <Route
+        path={`${RoutesEnum.DATABASES}/:dbName`}
+        element={<DatasetPage />}
+      />
 
-			{/* Dataset Details Page */}
-			<Route
-				path={`${RoutesEnum.DATABASES}/:dbName/:docId`}
-				element={<DatasetDetailPage />}
-			/>
-		</Route>
-	</RouterRoutes>
+      {/* Dataset Details Page */}
+      <Route
+        path={`${RoutesEnum.DATABASES}/:dbName/:docId`}
+        element={<DatasetDetailPage />}
+      />
+
+      {/* Search Page */}
+      <Route path={RoutesEnum.SEARCH} element={<SearchPage />} />
+    </Route>
+  </RouterRoutes>
 );
 
 export default Routes;

src/design/Layouts/FullScreen.tsx

@@ -1,7 +1,8 @@
 import { AppBar, Box, Button, Grid, Toolbar, Typography } from "@mui/material";
 import { Colors } from "design/theme";
 import useIsLargeScreen from "hooks/useIsLargeScreen";
-import { Outlet, useNavigate } from "react-router-dom";
+import { Outlet, useNavigate, Link } from "react-router-dom";
+import RoutesEnum from "types/routes.enum";
 
 const FullScreen = () => {
   const isLargeScreen = useIsLargeScreen();
@@ -107,26 +108,31 @@ const FullScreen = () => {
                         </Typography>
                       </a>
                     ) : (
-                      <Typography
-                        align="center"
-                        fontWeight={600}
-                        lineHeight={"1.5rem"}
-                        letterSpacing={"0.05rem"}
-                        sx={{
-                          color: Colors.white,
-                          transition: "color 0.3s ease, transform 0.3s ease",
-                          "&:hover": {
-                            color: Colors.green,
-                            transform: "scale(1.05)",
-                            cursor: "pointer",
-                            boxShadow: `0px 0px 15px ${Colors.green}`,
-                            borderRadius: "5px",
-                            padding: "5px",
-                          },
-                        }}
+                      <Link
+                        to={RoutesEnum.SEARCH}
+                        style={{ textDecoration: "none" }}
                       >
-                        {text}
-                      </Typography>
+                        <Typography
+                          align="center"
+                          fontWeight={600}
+                          lineHeight={"1.5rem"}
+                          letterSpacing={"0.05rem"}
+                          sx={{
+                            color: Colors.white,
+                            transition: "color 0.3s ease, transform 0.3s ease",
+                            "&:hover": {
+                              color: Colors.green,
+                              transform: "scale(1.05)",
+                              cursor: "pointer",
+                              boxShadow: `0px 0px 15px ${Colors.green}`,
+                              borderRadius: "5px",
+                              padding: "5px",
+                            },
+                          }}
+                        >
+                          {text}
+                        </Typography>
+                      </Link>
                     )}
                   </Grid>
                 ))}

src/pages/SearchPage.tsx

@@ -0,0 +1,8 @@
+import { Typography } from "@mui/material";
+import React from "react";
+
+const SearchPage: React.FC = () => {
+  return <Typography variant="h1">Search Page</Typography>;
+};
+
+export default SearchPage;

src/types/routes.enum.ts

@@ -1,5 +1,6 @@
 enum RoutesEnum {
-  HOME = '/',
+  HOME = "/",
   DATABASES = "/databases", // New route for databases
+  SEARCH = "/search", // New route for the search page
 }
 export default RoutesEnum;