import React, { useEffect, useState, useRef } from 'react' import DashboardCard from './DashboardCard' import FeatureSection from './FeatureSection' import Sidebar from './Sidebar' import StatusBar from './StatusBar' import NotificationsPanel from './NotificationsPanel' import Footer from './Footer' import StatCard from './StatCard' import Marquee from 'react-fast-marquee' import { ChevronRight, Bell, ArrowRight, ExternalLink, Eye, Activity, Clock, ThermometerSun, Wifi, Rocket, Satellite, Gauge, BarChart3, Zap, AlertCircle, } from 'lucide-react' const Dashboard = () => { const [notificationsOpen, setNotificationsOpen] = useState(false) const [animatedStats, setAnimatedStats] = useState(false) const notificationsPanelRef = useRef(null) const notificationButtonRef = useRef(null) const statsRef = useRef(null) // Handle clicks outside of notifications panel useEffect(() => { const handleClickOutside = (event) => { if ( notificationsOpen && notificationsPanelRef.current && !notificationsPanelRef.current.contains(event.target) && notificationButtonRef.current && !notificationButtonRef.current.contains(event.target) ) { setNotificationsOpen(false) } } document.addEventListener('mousedown', handleClickOutside) return () => { document.removeEventListener('mousedown', handleClickOutside) } }, [notificationsOpen]) // Animate stats when they come into view useEffect(() => { const observer = new IntersectionObserver( (entries) => { if (entries[0].isIntersecting) { setAnimatedStats(true) observer.disconnect() } }, { threshold: 0.2, }, ) if (statsRef.current) { observer.observe(statsRef.current) } return () => { if (statsRef.current) { observer.disconnect() } } }, []) return (

{/* Animated background gradient */}

{/* Top Navigation */} {/* Main content */}

{/* Header with mission status */}

MISSION CONTROL CENTER

SYSTEMS NOMINAL

{/* Status Bar */} {/* News Ticker Marquee */}

LIVE UPDATES

} text="Solar flare detected in sector 7G. Communications may be affected." /> } text="Artemis lander successfully deployed new seismic instruments on lunar surface." /> } text="ISS crew completes critical EVA to repair solar array." /> } text="Mars rover reaches milestone of 1000 sols on the red planet." /> } text="Extreme temperature fluctuations recorded at lunar south pole." />

{/* Featured missions section */}

Featured Missions

View all

{/* First row of mission cards with embedded stats */}

View Feed } darkOverlay stat={{ icon: , label: 'Orbit Status', value: 'Stable', trend: '+2% altitude', }} /> Access } darkOverlay stat={{ icon: , label: 'Power Systems', value: '98.7%', trend: 'Optimal', }} /> } darkOverlay stat={{ icon: , label: 'Data Collection', value: '2.8 TB', trend: '+0.4 TB today', }} />

{/* Mars Exploration and James Webb */}

{/* Mars Exploration - Large card (2 columns) */}

Explore } darkOverlay stat={{ icon: , label: 'Sample Collection', value: '237 samples', trend: '+12% from last week', }} />

{/* Deep Space Observatory - Purple card */}

View discoveries } stat={{ icon: , label: 'System Health', value: 'Excellent', trend: 'All mirrors aligned', }} />

{/* Mission Stats */}

Mission Metrics

} color="border-green-500" bgColor="bg-green-500/10" animated={animatedStats} delay="0" /> } color="border-purple-500" bgColor="bg-purple-500/10" animated={animatedStats} delay="150" /> } color="border-orange-500" bgColor="bg-orange-500/10" animated={animatedStats} delay="300" /> } color="border-blue-500" bgColor="bg-blue-500/10" animated={animatedStats} delay="450" />

{/* Secondary mission cards */}

Active Operations

View all

Monitor } darkOverlay compact /> } compact /> Navigate } compact /> } compact />

{/* Communication and development cards */}

Signal Status } darkOverlay stat={{ icon: , label: 'Signal Strength', value: '97.4%', trend: 'Strong', }} /> View Projects } darkOverlay stat={{ icon: , label: 'Development Timeline', value: 'On Schedule', trend: 'Phase 2 in progress', }} />

{/* Bottom feature section */}

{/* Footer */}

{/* Notifications panel */}

setNotificationsOpen(false)} />

) } const NewsItem = ({ icon, text }) => { return (

{icon}

{text}

) } export default Dashboard

Using Tailwind CSS

Using `Tailwind CSS`