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'
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>
)

View File

@ -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