Create frontend/src/components/shared/Navigation.tsx

frontend/src/components/shared/Navigation.tsx

@@ -0,0 +1,64 @@
+// src/components/shared/Navigation.tsx
+import React from 'react';
+import { Home, BookOpen, Code, MessageCircle, User, LogOut } from 'lucide-react';
+import { useUser } from '../../contexts/UserContext';
+
+const NavLink = ({ href, icon, children }) => (
+  <a
+    href={href}
+    className="inline-flex items-center gap-2 px-1 pt-1 text-gray-600 hover:text-gray-900
+              border-b-2 border-transparent hover:border-blue-500"
+  >
+    {icon}
+    <span>{children}</span>
+  </a>
+);
+
+const Navigation = () => {
+  const { user, logout } = useUser();
+
+  return (
+    <nav className="bg-white shadow-sm">
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="flex justify-between h-16">
+          {/* Logo and main nav */}
+          <div className="flex">
+            <div className="flex-shrink-0 flex items-center">
+              <span className="text-2xl font-bold text-blue-600">EduAI</span>
+            </div>
+            
+            <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
+              <NavLink icon={<Home size={20} />} href="/">Home</NavLink>
+              <NavLink icon={<BookOpen size={20} />} href="/paths">Learning Paths</NavLink>
+              <NavLink icon={<MessageCircle size={20} />} href="/tutor">AI Tutor</NavLink>
+              <NavLink icon={<Code size={20} />} href="/playground">Code Playground</NavLink>
+            </div>
+          </div>
+
+          {/* User menu */}
+          <div className="flex items-center">
+            {user.isAuthenticated ? (
+              <div className="flex items-center gap-4">
+                <span className="text-gray-700">{user.username}</span>
+                <button
+                  onClick={logout}
+                  className="flex items-center gap-2 text-gray-600 hover:text-gray-900"
+                >
+                  <LogOut size={20} />
+                  <span className="hidden sm:inline">Sign out</span>
+                </button>
+              </div>
+            ) : (
+              <button className="flex items-center gap-2 text-blue-600 hover:text-blue-800">
+                <User size={20} />
+                <span>Sign in</span>
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navigation;