import React from "react";
import {
  BrowserRouter as Router,
  Routes,
  NavLink,
  Route,
} from "react-router-dom";
import About from "./Aboutus";
import Contact from "./Contactus";
import Portfolio from "./Portfolio";
export default class Indexcomponent extends React.Component {
  render() {
    return (
      <div>
        <Router>
          <nav
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              backgroundColor: "#333",
              padding: "10px",
            }}
          >
            <div style={{ display: "flex", alignItems: "center" }}>
              <NavLink
                to="/about"
                style={{
                  color: "#fff",
                  marginRight: "20px",
                  textDecoration: "none",
                }}
              >
                About
              </NavLink>
              <NavLink
                to="/contact"
                style={{
                  color: "#fff",
                  marginRight: "20px",
                  textDecoration: "none",
                }}
              >
                Contact
              </NavLink>
              <NavLink
                to="/portfolio"
                style={{
                  color: "#fff",
                  marginRight: "20px",
                  textDecoration: "none",
                }}
              >
                Portfolio
              </NavLink>
            </div>
          </nav>
          <Routes>
            <Route path="/about" element={<About />}></Route>
            <Route path="/contact" element={<Contact />}></Route>
            <Route path="/portfolio" element={<Portfolio />}></Route>
          </Routes>
        </Router>
      </div>
    );
  }
}