refactoring node 24

src/components/NavigationTabs.js

@@ -0,0 +1,49 @@
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+
+const NavigationTabs = ({ isAdmin, onProtectedNavigate }) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  if (!isAdmin) {
+    return null;
+  }
+
+  const tabs = [
+    { to: '/', label: 'Konfiguration' },
+    { to: '/admin', label: 'Admin' }
+  ];
+
+  const handleClick = (event, to) => {
+    event.preventDefault();
+    if (to === location.pathname) {
+      return;
+    }
+    onProtectedNavigate(`zur Seite "${tabs.find((tab) => tab.to === to)?.label || ''}" zu wechseln`, () =>
+      navigate(to)
+    );
+  };
+
+  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;