Merge pull request #4 from adityasimant/main

Created a Navbar and implimented routes

package.json

@@ -10,6 +10,8 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.8.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.10.1",
+    "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -1,10 +1,28 @@
 import './App.css';
-
+import NavBar from './components/Navbar';
+import {
+  BrowserRouter as Router,
+  Route,
+  Routes,
+  Navigate
+} from "react-router-dom";
+import Events from './components/Events';
+import CoreTeam from './components/CoreTeam';
+import Contact from './components/Contact';
+import Home from './components/Home';
 function App() {
   return (
     <>
-      <h2>Hello world!</h2>
-      <h3>You have successfully started the app!</h3>
+      <Router>
+      <NavBar/>
+      <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/events" element={<Events />} />
+          <Route path="/coreteam" element={<CoreTeam />} />
+          <Route path="/contact" element={<Contact />} />
+          <Route path="*" element={<Navigate to="/"/>} />
+        </Routes>
+        </Router>
     </>
   );
 }

src/components/Contact.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class Contact extends Component {
+    render() {
+        return (
+            <div>
+                Contact Page
+            </div>
+        );
+    }
+}
+
+export default Contact;

src/components/CoreTeam.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class CoreTeam extends Component {
+    render() {
+        return (
+            <div>
+                This is core team
+            </div>
+        );
+    }
+}
+
+export default CoreTeam;

src/components/Events.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class Events extends Component {
+    render() {
+        return (
+            <div>
+                This is events page
+            </div>
+        );
+    }
+}
+
+export default Events;

src/components/Home.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class Home extends Component {
+    render() {
+        return (
+            <div>
+                This is home page
+            </div>
+        );
+    }
+}
+
+export default Home;

src/components/Navbar.js

@@ -0,0 +1,31 @@
+import Container from 'react-bootstrap/Container';
+import Nav from 'react-bootstrap/Nav';
+import Navbar from 'react-bootstrap/Navbar';
+import { Link } from 'react-router-dom';
+
+
+
+function NavBar() {
+
+    return(
+        <>
+        <Navbar bg="dark" data-bs-theme="dark">
+        <Container>            
+          <Navbar.Brand href="#home">IETE DIEMS ISF</Navbar.Brand>
+          <Navbar.Toggle />
+          <Nav className="m-auto" variant='primary' >
+            <Nav.Link as={Link} to="/">Home</Nav.Link>
+            <Nav.Link as={Link} to="/">About</Nav.Link>
+            <Nav.Link as={Link} to="/events">Events</Nav.Link>
+            <Nav.Link as={Link} to="/coreteam">Core Team</Nav.Link>
+            <Nav.Link as={Link} to="/contact">Contact us</Nav.Link>
+          </Nav>
+        </Container>
+      </Navbar>
+        </>
+    )
+
+
+}
+
+export default NavBar;