Add 'frontend/' from commit '63381d9f2a4829e09d9ba6f29608bbaa2eb38601'

git-subtree-dir: frontend git-subtree-mainline: 79bc04aaa7 git-subtree-split: 63381d9f2a
2026-07-31 23:53:50 +05:00
parent 79bc04aaa7 63381d9f2a
commit 010d98df1c
39 changed files with 4968 additions and 0 deletions
@@ -0,0 +1,76 @@
+import { NavLink, Navigate, Route, Routes } from 'react-router-dom'
+import { LogOut, Moon, Router, Sun, Wifi } from 'lucide-react'
+import { useAuth } from '@/auth/auth'
+import { useTheme } from '@/lib/theme'
+import { Login } from '@/pages/Login'
+import { Devices } from '@/pages/Devices'
+import { Vlans } from '@/pages/Vlans'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+function ThemeToggle() {
+  const { theme, toggle } = useTheme()
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={toggle}
+      className="text-muted-foreground"
+      title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
+      aria-label="Toggle theme"
+    >
+      {theme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+    </Button>
+  )
+}
+
+function Nav() {
+  const { logout } = useAuth()
+  const linkClass = ({ isActive }: { isActive: boolean }) =>
+    cn(
+      'inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
+      isActive ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-accent',
+    )
+
+  return (
+    <header className="border-b bg-background">
+      <div className="mx-auto flex h-14 max-w-6xl items-center gap-1 px-4">
+        <div className="mr-4 flex items-center gap-2 font-semibold">
+          <Wifi className="h-5 w-5 text-primary" />
+          RADIUS Admin
+        </div>
+        <NavLink to="/devices" className={linkClass}>
+          <Router className="h-4 w-4" /> Devices
+        </NavLink>
+        <NavLink to="/vlans" className={linkClass}>
+          <Wifi className="h-4 w-4" /> VLANs
+        </NavLink>
+        <div className="ml-auto flex items-center gap-1">
+          <ThemeToggle />
+          <Button variant="ghost" size="sm" className="text-muted-foreground" onClick={logout}>
+            <LogOut className="h-4 w-4" /> Sign out
+          </Button>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+export default function App() {
+  const { authenticated } = useAuth()
+
+  if (!authenticated) return <Login />
+
+  return (
+    <div className="min-h-screen bg-muted/20">
+      <Nav />
+      <main className="mx-auto max-w-6xl px-4 py-6">
+        <Routes>
+          <Route path="/devices" element={<Devices />} />
+          <Route path="/vlans" element={<Vlans />} />
+          <Route path="*" element={<Navigate to="/devices" replace />} />
+        </Routes>
+      </main>
+    </div>
+  )
+}