Working empty page for map

frontend/src/App.tsx

@@ -1,5 +1,6 @@
 import { Container, Grid } from '@mui/material'
 import { FrontPage } from './components/FrontPage'
+import { MapPage } from './components/MapPage'
 import { NavBar } from './components/NavBar'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import { Login } from './components/Login'
@@ -44,6 +45,7 @@ const App = () => {
                 <Route element={<EmailPage />} path="/email/" />
                 <Route element={<Login />} path="/login" />
                 <Route element={<FrontPage />} path="/" />
+                <Route element={<MapPage />} path="/map" />
                 <Route element={<div>Page not found.</div>} path="*" />
               </Routes>
             </Grid>

frontend/src/components/MapPage.tsx

@@ -0,0 +1,9 @@
+import { Container } from '@mui/material'
+
+export const MapPage = () => {
+  return (
+    <Container style={{ alignContent: 'center' }} maxWidth="sm">
+      <p style={{ fontSize: 20 }}>Add map somewhere here</p>
+    </Container>
+  )
+}

frontend/src/components/NavBar.tsx

@@ -45,6 +45,7 @@ export const NavBar = () => {
         { title: 'Email', url: '/email' },
       ],
     },
+    { title: 'Map', url: '/map' },
   ]
 
   if (user.username) pages.push({ title: 'User', url: '/person/user-page' })