49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
import { useState } from 'react'
|
|
import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom'
|
|
import CollectionMap from './components/CollectionMap'
|
|
import WatchedMap from './components/WatchedMap'
|
|
import './App.css'
|
|
|
|
function App() {
|
|
return (
|
|
<Router>
|
|
<div className="app">
|
|
<NavBar />
|
|
<Routes>
|
|
<Route path="/" element={<CollectionMap />} />
|
|
<Route path="/watched" element={<WatchedMap />} />
|
|
</Routes>
|
|
</div>
|
|
</Router>
|
|
)
|
|
}
|
|
|
|
function NavBar() {
|
|
const location = useLocation()
|
|
|
|
return (
|
|
<nav className="navbar">
|
|
<div className="nav-container">
|
|
<h1 className="nav-title">Movie Map</h1>
|
|
<div className="nav-links">
|
|
<Link
|
|
to="/"
|
|
className={location.pathname === '/' ? 'active' : ''}
|
|
>
|
|
Collection Map
|
|
</Link>
|
|
<Link
|
|
to="/watched"
|
|
className={location.pathname === '/watched' ? 'active' : ''}
|
|
>
|
|
Watched Map
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
export default App
|
|
|