asd

frontend/src/App.js

@@ -1,19 +1,20 @@
 import './App.css';
 import HomePage from './pages/HomePage'
-import { BrowserRouter as Router} from "react-router-dom";
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import AuthPage from './pages/AuthPage'
-import { Switch, Route } from 'react-router-dom';
 
 function App() {
   return (
     <Router>
-      <div className="App">
+
-        <Switch>
+    <Routes>
-          <Route path="/auth" component={AuthPage} />
+    <Route path="/auth" element={<AuthPage />} />
-        </Switch>
+    <Route path="/" element={<div className="App">
       <HomePage />
-      </div>
+      </div>} />
+    </Routes>
     </Router>
+
   );
 }
 

frontend/src/components/Header.jsx

@@ -17,6 +17,7 @@ import {
 } from 'mdb-react-ui-kit';
 import 'mdb-react-ui-kit/dist/css/mdb.min.css';
 import "@fortawesome/fontawesome-free/css/all.min.css";
+import { Link } from 'react-router-dom';
 
 export default function App() {
   const [showBasic, setShowBasic] = useState(false);
@@ -24,7 +25,9 @@ export default function App() {
   return (
     <MDBNavbar expand='lg' light bgColor='light'>
       <MDBContainer fluid>
-        <MDBNavbarBrand href='#'>CodeBox</MDBNavbarBrand>
+        <Link to="/">
+        <MDBNavbarBrand>CodeBox</MDBNavbarBrand>
+        </Link>
 
         <MDBNavbarToggler
           aria-controls='navbarSupportedContent'

frontend/src/components/MainCard.jsx

@@ -14,8 +14,7 @@ import { Link } from 'react-router-dom';
 
 const MainCard = () => {
   return (
-    <>
+      <MDBCard style={{width: "80%"}}>
-      <MDBCard>
         <MDBCardBody>
           <MDBCardTitle>Welcome to CodeBox!</MDBCardTitle>
           <MDBCardText>
@@ -26,7 +25,6 @@ const MainCard = () => {
 
         </MDBCardBody>
       </MDBCard>
-    </>
   );
 }
 

frontend/src/pages/BasicPage.jsx

@@ -1,12 +1,12 @@
 import Header from '../components/Header'
 import { BrowserRouter as Router, Route } from 'react-router-dom';
 
-function BasicPage(props){
+const BasicPage = (props, style) => {
     return (
-        <>
+        <div style={style}>
             <Header />
             {props.children}
-        </>
+        </div>
     );
 }
 

frontend/src/pages/HomePage.jsx

@@ -3,7 +3,7 @@ import MainCard from '../components/MainCard'
 
 const Page = () => {
     return (
-        <BasicPage>
+        <BasicPage style={{margin: "20%"}}>
             <MainCard />
         </BasicPage>
     );