Spaces:
Build error
Build error
File size: 2,247 Bytes
100befc | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 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; |