Add routes prop in TopBar
This commit is contained in:
parent
68e4d7ff01
commit
77c67168ad
@ -1,21 +1,17 @@
|
||||
import { NavLink } from 'react-router-dom'
|
||||
|
||||
const TopBar = () => {
|
||||
const TopBar = ({ routes }: { routes: { name: string; path: string }[] }) => {
|
||||
const linkClass = ({ isActive }: { isActive: boolean }) =>
|
||||
isActive ? 'underline font-bold' : ''
|
||||
return (
|
||||
<div className="flex items-center bg-gray-300 py-6 px-10 shadow">
|
||||
<h1 className="text-xl font-bold">System PRI</h1>
|
||||
<div className="flex ml-10 gap-3">
|
||||
<NavLink className={linkClass} to="/coordinator/groups">
|
||||
Grupy
|
||||
</NavLink>
|
||||
<NavLink className={linkClass} to="/coordinator/students">
|
||||
Studenci
|
||||
</NavLink>
|
||||
<NavLink className={linkClass} to="/coordinator/leaders">
|
||||
Opiekunowie
|
||||
</NavLink>
|
||||
{routes.map(({ path, name }) => (
|
||||
<NavLink key={path} className={linkClass} to={path}>
|
||||
{name}
|
||||
</NavLink>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
@ -1,23 +1,29 @@
|
||||
import { useEffect } from "react";
|
||||
import { Outlet, useNavigate } from "react-router-dom";
|
||||
import TopBar from "../../components/TopBar";
|
||||
import { useEffect } from 'react'
|
||||
import { Outlet, useNavigate } from 'react-router-dom'
|
||||
import TopBar from '../../components/TopBar'
|
||||
|
||||
const Coordinator = () => {
|
||||
const navigate = useNavigate();
|
||||
const navigate = useNavigate()
|
||||
|
||||
useEffect(() => {
|
||||
navigate("/coordinator/students");
|
||||
navigate('/coordinator/students')
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<TopBar />
|
||||
<TopBar
|
||||
routes={[
|
||||
{ name: 'Grupy', path: '/coordinator/groups' },
|
||||
{ name: 'Studenci', path: '/coordinator/students' },
|
||||
{ name: 'Opiekunowie', path: '/coordinator/leaders' },
|
||||
]}
|
||||
/>
|
||||
<div className="m-10">
|
||||
<Outlet />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default Coordinator;
|
||||
export default Coordinator
|
||||
|
Loading…
Reference in New Issue
Block a user