Spaces:
Build error
Build error
| 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; |