Add routes prop in TopBar

This commit is contained in:
adam-skowronek 2022-06-09 23:59:07 +02:00
parent 68e4d7ff01
commit 77c67168ad
2 changed files with 22 additions and 20 deletions

View File

@ -1,21 +1,17 @@
import { NavLink } from 'react-router-dom' import { NavLink } from 'react-router-dom'
const TopBar = () => { const TopBar = ({ routes }: { routes: { name: string; path: string }[] }) => {
const linkClass = ({ isActive }: { isActive: boolean }) => const linkClass = ({ isActive }: { isActive: boolean }) =>
isActive ? 'underline font-bold' : '' isActive ? 'underline font-bold' : ''
return ( return (
<div className="flex items-center bg-gray-300 py-6 px-10 shadow"> <div className="flex items-center bg-gray-300 py-6 px-10 shadow">
<h1 className="text-xl font-bold">System PRI</h1> <h1 className="text-xl font-bold">System PRI</h1>
<div className="flex ml-10 gap-3"> <div className="flex ml-10 gap-3">
<NavLink className={linkClass} to="/coordinator/groups"> {routes.map(({ path, name }) => (
Grupy <NavLink key={path} className={linkClass} to={path}>
</NavLink> {name}
<NavLink className={linkClass} to="/coordinator/students"> </NavLink>
Studenci ))}
</NavLink>
<NavLink className={linkClass} to="/coordinator/leaders">
Opiekunowie
</NavLink>
</div> </div>
</div> </div>
) )

View File

@ -1,23 +1,29 @@
import { useEffect } from "react"; import { useEffect } from 'react'
import { Outlet, useNavigate } from "react-router-dom"; import { Outlet, useNavigate } from 'react-router-dom'
import TopBar from "../../components/TopBar"; import TopBar from '../../components/TopBar'
const Coordinator = () => { const Coordinator = () => {
const navigate = useNavigate(); const navigate = useNavigate()
useEffect(() => { useEffect(() => {
navigate("/coordinator/students"); navigate('/coordinator/students')
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, [])
return ( return (
<> <>
<TopBar /> <TopBar
routes={[
{ name: 'Grupy', path: '/coordinator/groups' },
{ name: 'Studenci', path: '/coordinator/students' },
{ name: 'Opiekunowie', path: '/coordinator/leaders' },
]}
/>
<div className="m-10"> <div className="m-10">
<Outlet /> <Outlet />
</div> </div>
</> </>
); )
}; }
export default Coordinator; export default Coordinator