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