65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo } from 'react';
|
|
import dynamic from 'next/dynamic';
|
|
import EventCard from '@/components/EventCard';
|
|
import { Satellite, Rocket, Moon, Sparkles } from 'lucide-react';
|
|
|
|
// Now we can safely call dynamic with ssr:false here
|
|
const Starfield = dynamic(() => import('@/components/Starfield'), {
|
|
ssr: false
|
|
});
|
|
|
|
export default function MissionControl() {
|
|
// Use the BASE_TIME from your terminal (Jan 2026 value)
|
|
const BASE_TIME = 1769610273000;
|
|
|
|
const events = useMemo(() => [
|
|
{
|
|
title: "ISS Overhead: Home",
|
|
date: new Date(BASE_TIME + 1000 * 60 * 60 * 2),
|
|
icon: <Satellite size={20} />,
|
|
},
|
|
{
|
|
title: "Next Lunar Phase: Full",
|
|
date: new Date(BASE_TIME + 1000 * 60 * 60 * 24 * 3),
|
|
icon: <Moon size={20} />,
|
|
},
|
|
{
|
|
title: "Starlink Train",
|
|
date: new Date(BASE_TIME + 1000 * 60 * 45),
|
|
icon: <Rocket size={20} />,
|
|
},
|
|
{
|
|
title: "Meteor Shower",
|
|
date: new Date(BASE_TIME + 1000 * 60 * 60 * 24 * 10),
|
|
icon: <Sparkles size={20} />,
|
|
}
|
|
], []);
|
|
|
|
return (
|
|
<div className="relative min-h-screen flex flex-col items-center p-8 overflow-hidden">
|
|
<Starfield />
|
|
|
|
<header className="z-10 text-center mb-16 mt-10">
|
|
<h1 className="text-4xl md:text-6xl font-mono font-bold text-white tracking-tighter mb-4 uppercase">
|
|
Mission<span className="text-blue-500 font-black">Control</span>
|
|
</h1>
|
|
<p className="text-slate-400 font-mono text-xs tracking-[0.3em] uppercase opacity-70">
|
|
Ground Station // [55.6761° N, 12.5683° E]
|
|
</p>
|
|
</header>
|
|
|
|
<div className="z-10 grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-5xl">
|
|
{events.map((event, index) => (
|
|
<EventCard
|
|
key={index}
|
|
title={event.title}
|
|
targetDate={event.date}
|
|
icon={event.icon}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |