issue1 resolved!

package.json

@@ -28,6 +28,8 @@
  },
  "dependencies": {
  "node": "^20.6.0",
- "styled-components": "^6.1.0"
+ "react-router-dom": "^6.17.0",
+ "styled-components": "^6.1.0",
+ "switch": "^0.0.0"
  }
 }

src/App.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+
+import Navbar from './components/NavBar';
+import Home from './components/Home';
+import About from './components/About';
+import Services from './components/Services';
+import Contact from './components/Contact';
+
+function App() {
+ return (
+ <Router>
+ <div className="App">
+ <Navbar />
+ <div className="content">
+ <Routes>
+ <Route path="/home" Component={Home} />
+ <Route path="/about" Component={About} />
+ <Route path="/services" Component={Services} />
+ <Route path="/contact" Component={Contact} />
+ {/* Add more routes as needed */}
+ </Routes>
+ </div>
+ </div>
+ </Router>
+ );
+}
+
+export default App;

src/components/About.tsx

@@ -0,0 +1,13 @@
+// About.tsx
+import React from 'react';
+
+const About: React.FC = () => {
+ return (
+ <div>
+ <h1>About Us</h1>
+ {/* Add content for your About page */}
+ </div>
+ );
+};
+
+export default About;

src/components/Contact.tsx

@@ -0,0 +1,13 @@
+// Services.tsx
+import React from 'react';
+
+const Services: React.FC = () => {
+ return (
+ <div>
+ <h1>Services</h1>
+ {/* Add content for your Services page */}
+ </div>
+ );
+};
+
+export default Services;

src/components/Home.tsx

@@ -0,0 +1,13 @@
+// Home.tsx
+import React from 'react';
+
+const Home: React.FC = () => {
+ return (
+ <div>
+ <h1>Home Page</h1>
+ {/* Add content for your Home page */}
+ </div>
+ );
+};
+
+export default Home;

src/components/NavBar.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+interface NavbarProps {
+ // You can define additional props here for customization
+}
+
+const Navbar: React.FC<NavbarProps> = () => {
+ const [activeLink, setActiveLink] = useState('Home');
+
+ const handleNavLinkClick = (link: string) => {
+ setActiveLink(link);
+ };
+
+ return (
+ <nav className="navbar">
+ <ul className="nav-list">
+ <li className={`nav-item ${activeLink === 'Home' ? 'active' : ''}`}>
+ <Link to="/home" onClick={() => handleNavLinkClick('Home')}>
+ Home
+ </Link>
+ </li>
+ <li className={`nav-item ${activeLink === 'About' ? 'active' : ''}`}>
+ <Link to="/about" onClick={() => handleNavLinkClick('About')}>
+ About Us
+ </Link>
+ </li>
+ <li className={`nav-item ${activeLink === 'Services' ? 'active' : ''}`}>
+ <Link to="/services" onClick={() => handleNavLinkClick('Services')}>
+ Services
+ </Link>
+ </li>
+ <li className={`nav-item ${activeLink === 'Contact' ? 'active' : ''}`}>
+ <Link to="/contact" onClick={() => handleNavLinkClick('Contact')}>
+ Contact
+ </Link>
+ </li>
+ {/* Add more navigation links as needed */}
+ </ul>
+ </nav>
+ );
+};
+
+export default Navbar;

src/components/Navbar.css

@@ -0,0 +1,27 @@
+/* Navbar.css */
+.navbar {
+ background-color: #333;
+ color: #fff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.nav-list {
+ list-style: none;
+ display: flex;
+ padding: 0;
+}
+
+.nav-item {
+ margin: 0 10px;
+}
+
+.nav-item a {
+ text-decoration: none;
+ color: #fff;
+}
+
+.nav-item.active {
+ border-bottom: 2px solid #fff;
+}

src/components/Services.tsx

@@ -0,0 +1,13 @@
+// Services.tsx
+import React from 'react';
+
+const Services: React.FC = () => {
+ return (
+ <div>
+ <h1>Services</h1>
+ {/* Add content for your Services page */}
+ </div>
+ );
+};
+
+export default Services;