Upload components/PlanetInfo.jsx with huggingface_hub

components/PlanetInfo.jsx

@@ -0,0 +1,176 @@
+import React from 'react';
+import { X, Orbit, Globe, Calendar, Wind, Thermometer } from 'lucide-react';
+
+const PlanetInfo = ({ planet, onClose }) => {
+  if (!planet) return null;
+
+  const planetData = {
+    mercury: {
+      name: "Mercury",
+      description: "The smallest planet in the Solar System and the closest to the Sun. It is only slightly larger than Earth's Moon.",
+      facts: {
+        diameter: "4,879 km",
+        distance: "57.9 million km",
+        orbit: "88 Earth days",
+        temperature: "-173°C to 427°C",
+        moons: "0"
+      },
+      color: "bg-gray-400"
+    },
+    venus: {
+      name: "Venus",
+      description: "The second planet from the Sun. It has a thick atmosphere that traps heat, making it the hottest planet.",
+      facts: {
+        diameter: "12,104 km",
+        distance: "108.2 million km",
+        orbit: "225 Earth days",
+        temperature: "462°C",
+        moons: "0"
+      },
+      color: "bg-yellow-200"
+    },
+    earth: {
+      name: "Earth",
+      description: "Our home planet! The third planet from the Sun and the only place we know of so far that’s inhabited by living things.",
+      facts: {
+        diameter: "12,742 km",
+        distance: "149.6 million km",
+        orbit: "365.25 days",
+        temperature: "-88°C to 58°C",
+        moons: "1"
+      },
+      color: "bg-blue-400"
+    },
+    mars: {
+      name: "Mars",
+      description: "The fourth planet from the Sun and the second-smallest planet. It's often called the 'Red Planet'.",
+      facts: {
+        diameter: "6,779 km",
+        distance: "227.9 million km",
+        orbit: "687 Earth days",
+        temperature: "-113°C to 35°C",
+        moons: "2"
+      },
+      color: "bg-red-500"
+    },
+    jupiter: {
+      name: "Jupiter",
+      description: "The largest planet in the Solar System. A gas giant with a mass one-thousandth that of the Sun.",
+      facts: {
+        diameter: "139,820 km",
+        distance: "778.5 million km",
+        orbit: "11.86 Earth years",
+        temperature: "-108°C",
+        moons: "79"
+      },
+      color: "bg-orange-200"
+    },
+    saturn: {
+      name: "Saturn",
+      description: "The sixth planet from the Sun and the second-largest. It's famous for its prominent ring system.",
+      facts: {
+        diameter: "116,460 km",
+        distance: "1.4 billion km",
+        orbit: "29.45 Earth years",
+        temperature: "-139°C",
+        moons: "82"
+      },
+      color: "bg-yellow-100"
+    },
+    uranus: {
+      name: "Uranus",
+      description: "The seventh planet from the Sun. It has the third-largest planetary radius and fourth-largest planetary mass.",
+      facts: {
+        diameter: "50,724 km",
+        distance: "2.9 billion km",
+        orbit: "84 Earth years",
+        temperature: "-197°C",
+        moons: "27"
+      },
+      color: "bg-cyan-300"
+    },
+    neptune: {
+      name: "Neptune",
+      description: "The eighth and farthest-known solar planet from the Sun. It's known for its strong winds.",
+      facts: {
+        diameter: "49,244 km",
+        distance: "4.5 billion km",
+        orbit: "164.8 Earth years",
+        temperature: "-201°C",
+        moons: "14"
+      },
+      color: "bg-blue-500"
+    }
+  };
+
+  const data = planetData[planet.toLowerCase()] || planetData.earth;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
+      <div className="bg-gray-900 rounded-2xl border border-white/10 w-full max-w-2xl max-h-[90vh] overflow-y-auto shadow-2xl">
+        <div className="relative">
+          <div className={`h-32 ${data.color} relative overflow-hidden`}>
+            <div className="absolute inset-0 bg-gradient-to-b from-transparent to-gray-900/80" />
+            <button 
+              onClick={onClose}
+              className="absolute top-4 right-4 text-white/70 hover:text-white p-2 rounded-full hover:bg-white/10"
+            >
+              <X className="h-6 w-6" />
+            </button>
+            <div className="absolute bottom-6 left-6">
+              <h2 className="text-4xl font-bold text-white mb-2">{data.name}</h2>
+              <p className="text-white/80 text-lg max-w-xl">{data.description}</p>
+            </div>
+          </div>
+          
+          <div className="p-6">
+            <h3 className="text-xl font-semibold text-white mb-4">Key Statistics</h3>
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+              <div className="bg-gray-800/50 p-4 rounded-xl">
+                <Globe className="h-6 w-6 text-blue-400 mb-2" />
+                <p className="text-gray-400 text-sm">Diameter</p>
+                <p className="text-white font-medium">{data.facts.diameter}</p>
+              </div>
+              <div className="bg-gray-800/50 p-4 rounded-xl">
+                <Orbit className="h-6 w-6 text-purple-400 mb-2" />
+                <p className="text-gray-400 text-sm">Distance from Sun</p>
+                <p className="text-white font-medium">{data.facts.distance}</p>
+              </div>
+              <div className="bg-gray-800/50 p-4 rounded-xl">
+                <Calendar className="h-6 w-6 text-green-400 mb-2" />
+                <p className="text-gray-400 text-sm">Orbit Period</p>
+                <p className="text-white font-medium">{data.facts.orbit}</p>
+              </div>
+              <div className="bg-gray-800/50 p-4 rounded-xl">
+                <Thermometer className="h-6 w-6 text-red-400 mb-2" />
+                <p className="text-gray-400 text-sm">Temperature</p>
+                <p className="text-white font-medium">{data.facts.temperature}</p>
+              </div>
+              <div className="bg-gray-800/50 p-4 rounded-xl">
+                <Wind className="h-6 w-6 text-cyan-400 mb-2" />
+                <p className="text-gray-400 text-sm">Moons</p>
+                <p className="text-white font-medium">{data.facts.moons}</p>
+              </div>
+            </div>
+            
+            <div className="mt-8 p-6 bg-gradient-to-r from-blue-900/20 to-purple-900/20 rounded-xl border border-white/5">
+              <h3 className="text-lg font-medium text-white mb-2">Did You Know?</h3>
+              <p className="text-gray-300">
+                {planet.toLowerCase() === 'venus' && "Venus is the hottest planet in our solar system, with surface temperatures around 462°C (864°F), hot enough to melt lead!"}
+                {planet.toLowerCase() === 'jupiter' && "Jupiter is so large that all the other planets in the solar system could fit inside it!"}
+                {planet.toLowerCase() === 'saturn' && "Saturn's rings are made mostly of ice particles, with some rock and dust mixed in."}
+                {planet.toLowerCase() === 'earth' && "Earth is the only planet known to support life and the only one with liquid water on its surface."}
+                {planet.toLowerCase() === 'mars' && "Mars is home to Olympus Mons, the tallest volcano in the solar system, standing nearly 22 km (13.6 miles) high."}
+                {planet.toLowerCase() === 'mercury' && "Mercury is the smallest planet and has the most extreme temperature swings, from -173°C to 427°C."}
+                {planet.toLowerCase() === 'uranus' && "Uranus rotates on its side, with its axis tilted at 98 degrees, making it unique among the planets."}
+                {planet.toLowerCase() === 'neptune' && "Neptune has the strongest winds in the solar system, reaching speeds of up to 2,100 km/h (1,300 mph)."}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PlanetInfo;