import React from "react";
import {
BrowserRouter as Router,
Route,
Link,
Routes,
Outlet,
} from "react-router-dom";
import { Navbar, Nav, NavDropdown } from "react-bootstrap";
function GFGHome() {
return (
<div>
<h2>GeeksforGeeks Home Page</h2>
<p>Welcome to the GeeksforGeeks Home Page.</p>
</div>
);
}
function GFGAbout() {
return (
<div>
<h2>GeeksforGeeks About Page</h2>
<p>Learn more about GeeksforGeeks and its mission.</p>
</div>
);
}
function GFGContact() {
return (
<div>
<h2>GeeksforGeeks Contact Page</h2>
<p>Contact us for any inquiries or support.</p>
</div>
);
}
function NotFound() {
return (
<div>
<h2>404 Not Found</h2>
<p>Sorry, the page you are looking for does not exist.</p>
</div>
);
}
function GFGArticles() {
return (
<div>
<h2>GeeksforGeeks Articles Page</h2>
<p>
Explore a wide range of informative articles on various computer
science topics.
</p>
</div>
);
}
function GFGCourses() {
return (
<div>
<h2>GeeksforGeeks Courses Page</h2>
<p>
Enroll in comprehensive courses to enhance your coding skills
and knowledge.
</p>
</div>
);
}
function App() {
return (
<Router>
<Navbar bg="light" expand="lg">
<Navbar.Brand>
<h1 style={{ color: "green" }}>GeeksforGeeks</h1>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link as={Link} to="/" exact>
Home
</Nav.Link>
<Nav.Link as={Link} to="/about">
About
</Nav.Link>
<NavDropdown title="Resources">
<NavDropdown.Item as={Link} to="/articles">
Articles
</NavDropdown.Item>
<NavDropdown.Item as={Link} to="/courses">
Courses
</NavDropdown.Item>
</NavDropdown>
<Nav.Link as={Link} to="/contact">
Contact
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
<div className="container mt-4">
<Routes>
<Route path="/" element={<Outlet />}>
<Route index element={<GFGHome />} />
<Route path="/about" element={<GFGAbout />} />
<Route path="/contact" element={<GFGContact />} />
<Route path="/articles" element={<GFGArticles />} />
<Route path="/courses" element={<GFGCourses />} />
<Route path="*" element={<NotFound />} />
</Route>
</Routes>
</div>
</Router>
);
}
export default App;