53 lines
1.4 KiB
JavaScript
53 lines
1.4 KiB
JavaScript
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
|
|
|
const NavigationTabs = ({ isAdmin, onProtectedNavigate }) => {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
|
|
const tabs = [
|
|
{ to: '/', label: 'Konfiguration' },
|
|
{ to: '/store-watch', label: 'Betriebs-Monitoring' }
|
|
];
|
|
if (isAdmin) {
|
|
tabs.push({ to: '/admin', label: 'Admin' });
|
|
}
|
|
|
|
const handleClick = (event, to) => {
|
|
event.preventDefault();
|
|
if (to === location.pathname) {
|
|
return;
|
|
}
|
|
const label = tabs.find((tab) => tab.to === to)?.label || '';
|
|
const proceed = () => navigate(to);
|
|
if (onProtectedNavigate) {
|
|
onProtectedNavigate(`zur Seite "${label}" zu wechseln`, proceed);
|
|
return;
|
|
}
|
|
proceed();
|
|
};
|
|
|
|
return (
|
|
<nav className="mb-4 flex gap-2" aria-label="Navigation">
|
|
{tabs.map((tab) => {
|
|
const isActive = location.pathname === tab.to;
|
|
return (
|
|
<Link
|
|
key={tab.to}
|
|
to={tab.to}
|
|
onClick={(event) => handleClick(event, tab.to)}
|
|
className={`px-4 py-2 rounded-md border transition-colors ${
|
|
isActive
|
|
? 'bg-blue-500 text-white border-blue-600'
|
|
: 'bg-white text-gray-700 border-gray-300 hover:border-blue-400'
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default NavigationTabs;
|