Add main App component with routing
This commit is contained in:
57
client/src/App.jsx
Normal file
57
client/src/App.jsx
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
|
||||||
|
import { Dog, Home, Users, Activity, Heart, BookOpen } from 'lucide-react'
|
||||||
|
import Dashboard from './pages/Dashboard'
|
||||||
|
import DogList from './pages/DogList'
|
||||||
|
import DogDetail from './pages/DogDetail'
|
||||||
|
import PedigreeView from './pages/PedigreeView'
|
||||||
|
import LitterList from './pages/LitterList'
|
||||||
|
import BreedingCalendar from './pages/BreedingCalendar'
|
||||||
|
import './App.css'
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<Router>
|
||||||
|
<div className="app">
|
||||||
|
<nav className="navbar">
|
||||||
|
<div className="container">
|
||||||
|
<div className="nav-brand">
|
||||||
|
<Dog size={32} />
|
||||||
|
<span className="brand-text">BREEDR</span>
|
||||||
|
</div>
|
||||||
|
<div className="nav-links">
|
||||||
|
<Link to="/" className="nav-link">
|
||||||
|
<Home size={20} />
|
||||||
|
<span>Dashboard</span>
|
||||||
|
</Link>
|
||||||
|
<Link to="/dogs" className="nav-link">
|
||||||
|
<Users size={20} />
|
||||||
|
<span>Dogs</span>
|
||||||
|
</Link>
|
||||||
|
<Link to="/litters" className="nav-link">
|
||||||
|
<Activity size={20} />
|
||||||
|
<span>Litters</span>
|
||||||
|
</Link>
|
||||||
|
<Link to="/breeding" className="nav-link">
|
||||||
|
<Heart size={20} />
|
||||||
|
<span>Breeding</span>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main className="main-content">
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Dashboard />} />
|
||||||
|
<Route path="/dogs" element={<DogList />} />
|
||||||
|
<Route path="/dogs/:id" element={<DogDetail />} />
|
||||||
|
<Route path="/pedigree/:id" element={<PedigreeView />} />
|
||||||
|
<Route path="/litters" element={<LitterList />} />
|
||||||
|
<Route path="/breeding" element={<BreedingCalendar />} />
|
||||||
|
</Routes>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</Router>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
||||||
Reference in New Issue
Block a user