add analytics-view

analytics-view/src/components/Navbar.tsx

@@ -0,0 +1,53 @@
+import { Link, useLocation } from "react-router-dom";
+
+interface Props {
+  username: string;
+  onLogout: () => void;
+}
+
+export function Navbar({ username, onLogout }: Props) {
+  const { pathname } = useLocation();
+
+  function navClass(path: string) {
+    const base =
+      "px-4 py-2 rounded-lg text-sm font-medium transition-colors";
+    return pathname === path
+      ? `${base} bg-indigo-600 text-white`
+      : `${base} text-slate-300 hover:text-white hover:bg-slate-700`;
+  }
+
+  return (
+    <nav className="bg-slate-800 border-b border-slate-700 sticky top-0 z-10">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-14">
+          {/* Logo + nav links */}
+          <div className="flex items-center gap-2">
+            <span className="text-indigo-400 font-bold text-lg mr-4 hidden sm:block">
+              Analytics
+            </span>
+            <Link to="/" className={navClass("/")}>
+              Dashboard
+            </Link>
+            <Link to="/events" className={navClass("/events")}>
+              Events
+            </Link>
+          </div>
+
+          {/* User info + logout */}
+          <div className="flex items-center gap-3">
+            <span className="text-slate-400 text-sm hidden sm:block">
+              {username}
+            </span>
+            <button
+              onClick={onLogout}
+              className="text-sm font-medium text-slate-300 hover:text-white bg-slate-700 hover:bg-slate-600
+                         px-3 py-1.5 rounded-lg transition-colors"
+            >
+              Logout
+            </button>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}