Upload components/Navbar.jsx with huggingface_hub

components/Navbar.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Star, Info, Settings } from 'lucide-react';
+
+const Navbar = ({ setView, setSpeed, speed }) => {
+  return (
+    <nav className="fixed top-0 left-0 right-0 z-50 bg-black/30 backdrop-blur-md border-b border-white/10">
+      <div className="container mx-auto px-4 py-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Star className="text-cyan-400 h-6 w-6" />
+            <h1 className="text-xl font-bold bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent">
+              Solar System 3D
+            </h1>
+          </div>
+          
+          <div className="flex items-center gap-4">
+            <button 
+              onClick={() => setView('solar-system')}
+              className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
+                view === 'solar-system' 
+                  ? 'bg-cyan-500/20 text-cyan-400' 
+                  : 'text-gray-300 hover:bg-white/5'
+              }`}
+            >
+              Solar System
+            </button>
+            <button 
+              onClick={() => setView('planet-details')}
+              className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
+                view === 'planet-details' 
+                  ? 'bg-cyan-500/20 text-cyan-400' 
+                  : 'text-gray-300 hover:bg-white/5'
+              }`}
+            >
+              Planet Details
+            </button>
+            
+            <div className="flex items-center gap-2 ml-4">
+              <Settings className="h-4 w-4 text-gray-400" />
+              <span className="text-xs text-gray-400">Speed:</span>
+              <input 
+                type="range" 
+                min="0.1" 
+                max="2" 
+                step="0.1" 
+                value={speed} 
+                onChange={(e) => setSpeed(parseFloat(e.target.value))}
+                className="w-24 h-1 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-cyan-500"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+// Fix: Define view outside the component
+const view = 'solar-system';
+
+export default Navbar;