import { useState } from "react";
import 'antd/dist/antd.css'
import "./App.css";
import MainPage from "./components/MainPage";
import { Routes, Route, Outlet, Link, BrowserRouter } from "react-router-dom";
import { NavigationBar } from "./components/NavigationBar";
import { About } from "./components/About";
import React from "react";
import { Browse } from "./components/Browse";
import { SearchPage } from "./components/SearchPage";
import { ErrorPage } from "./components/ErrorPage";

function App() {
  return (
    <div className="app">
      
      <NavigationBar/>
      
        <Routes>
          <Route path="/" element={<MainPage/>}></Route>
          <Route path="/browse" element={<Browse/>}></Route>
          <Route path="/search" element={<SearchPage/>}></Route>
          <Route path="/about" element={<About/>}></Route>
          <Route path="*" element={<ErrorPage/>}></Route>
        </Routes>
      
    </div>
  );
}

export default App;