[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useState, Suspense } from "react" import { Canvas } from "@react-three/fiber" import { OrbitControls, Stars } from "@react-three/drei" import { motion } from "framer-motion" import SolarSystem from "../components/SolarSystem" import Sidebar from "../components/Sidebar" import InfoOverlay from "../components/InfoOverlay" import LoadingScreen from "../components/LoadingScreen" export default function Home() { const [selectedPlanet, setSelectedPlanet] = useState(null) const [showOverlay, setShowOverlay] = useState(false) return (

) } [V0_FILE]typescriptreact:file="components/Sidebar.tsx" isFixed="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" export default function Sidebar({ selectedPlanet }) { const [planetInfo, setPlanetInfo] = useState(null) useEffect(() => { if (selectedPlanet) { // In a real application, you would fetch this data from an API setPlanetInfo({ name: selectedPlanet, diameter: "12,742 km (Earth)", dayLength: "24 hours (Earth)", yearLength: "365 days (Earth)", temperature: "15°C (Earth average)", }) } }, [selectedPlanet]) return (

Solar System Explorer

{planetInfo ? (

{planetInfo.name}

Diameter: {planetInfo.diameter}
Day Length: {planetInfo.dayLength}
Year Length: {planetInfo.yearLength}
Average Temperature: {planetInfo.temperature}

) : (

Click on a planet to see more information

)} ) } [V0_FILE]typescriptreact:file="components/InfoOverlay.tsx" isMerged="true" import { motion } from "framer-motion" export default function InfoOverlay({ selectedPlanet }) { if (!selectedPlanet) return null return (

{selectedPlanet}

Click for more details in the sidebar

) } [V0_FILE]typescriptreact:file="components/LoadingScreen.tsx" isMerged="true" import { motion } from "framer-motion" export default function LoadingScreen() { return (

Loading Solar System...

) } [V0_FILE]javascript:file="next.config.js" isMerged="true" /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, } module.exports = nextConfig [V0_FILE]javascript:file="tailwind.config.js" isFixed="true" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", ], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]javascript:file="postcss.config.js" isMerged="true" module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import "./globals.css" import { Inter } from "next/font/google" import type React from "react" // Import React const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "Solar System Explorer", description: "An interactive 3D solar system explorer", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/Planet.tsx" isEdit="true" isQuickEdit="true" "use client" import { useRef } from "react" import { useFrame } from "@react-three/fiber" export default function Planet({ name, position, size, color, rotationSpeed, setSelectedPlanet, setShowOverlay }) { const meshRef = useRef() useFrame((state, delta) => { meshRef.current.rotation.y += delta * rotationSpeed }) return ( { setSelectedPlanet(name) setShowOverlay(true) }} onPointerOver={() => (document.body.style.cursor = "pointer")} onPointerOut={() => (document.body.style.cursor = "default")} > ) } [V0_FILE]typescriptreact:file="components/SolarSystem.tsx" isEdit="true" isQuickEdit="true" "use client" import { useRef } from "react" import { useFrame } from "@react-three/fiber" import Planet from "./Planet" const planets = [ { name: "Mercury", position: [4, 0, 0], size: 0.4, color: "#A9A9A9", rotationSpeed: 0.01 }, { name: "Venus", position: [7, 0, 0], size: 0.9, color: "#FFA500", rotationSpeed: 0.005 }, { name: "Earth", position: [10, 0, 0], size: 1, color: "#4169E1", rotationSpeed: 0.01 }, { name: "Mars", position: [13, 0, 0], size: 0.5, color: "#FF4500", rotationSpeed: 0.008 }, { name: "Jupiter", position: [18, 0, 0], size: 2.5, color: "#DEB887", rotationSpeed: 0.004 }, { name: "Saturn", position: [23, 0, 0], size: 2.2, color: "#F4A460", rotationSpeed: 0.0038 }, { name: "Uranus", position: [27, 0, 0], size: 1.8, color: "#00CED1", rotationSpeed: 0.003 }, { name: "Neptune", position: [30, 0, 0], size: 1.7, color: "#4169E1", rotationSpeed: 0.002 }, ] export default function SolarSystem({ setSelectedPlanet, setShowOverlay }) { const groupRef = useRef() useFrame((state, delta) => { groupRef.current.rotation.y += delta * 0.05 }) return ( {planets.map((planet) => ( ))} ) }

About

About