Upload components/Planet.jsx with huggingface_hub

components/Planet.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+
+const Planet = ({ 
+  name, 
+  size, 
+  distance, 
+  speed, 
+  color, 
+  texture, 
+  onClick,
+  hasRings = false 
+}) => {
+  const planetRef = React.useRef();
+  const pivotRef = React.useRef();
+  
+  useFrame((state) => {
+    if (pivotRef.current) {
+      pivotRef.current.rotation.y += speed * 0.005;
+    }
+    
+    if (planetRef.current) {
+      planetRef.current.rotation.y += 0.01;
+    }
+  });
+  
+  return (
+    <group ref={pivotRef}>
+      {/* Orbit path */}
+      <mesh rotation={[-Math.PI / 2, 0, 0]} onClick={onClick}>
+        <ringGeometry args={[distance - 0.1, distance + 0.1, 64]} />
+        <meshBasicMaterial color="#FFFFFF" transparent opacity={0.1} />
+      </mesh>
+      
+      {/* Planet */}
+      <mesh 
+        ref={planetRef}
+        position={[distance, 0, 0]}
+        onClick={onClick}
+        onPointerOver={() => document.body.style.cursor = 'pointer'}
+        onPointerOut={() => document.body.style.cursor = 'auto'}
+      >
+        <sphereGeometry args={[size, 32, 32]} />
+        <meshStandardMaterial 
+          color={color}
+          roughness={0.7}
+          metalness={0.1}
+          map={texture ? new THREE.TextureLoader().load(texture) : null}
+        />
+        
+        {/* Rings for Saturn */}
+        {hasRings && (
+          <mesh rotation={[-Math.PI / 2.5, 0, 0]}>
+            <ringGeometry args={[size * 1.4, size * 2.2, 64]} />
+            <meshStandardMaterial 
+              color="#CDBA86" 
+              transparent 
+              opacity={0.8} 
+              side={THREE.DoubleSide}
+            />
+          </mesh>
+        )}
+      </mesh>
+    </group>
+  );
+};
+
+export default Planet;