74 lines
2 KiB
TypeScript
74 lines
2 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';
|
|
import { MissionControlProps } from '@/types/space';
|
|
|
|
|
|
const Starfield = dynamic(() => import('@/components/Starfield'), {
|
|
ssr: false
|
|
});
|
|
|
|
|
|
export default function MissionControl({ iss, moon, cosmic, launch }: MissionControlProps) {
|
|
const events = useMemo(() => [
|
|
{
|
|
id: 'iss',
|
|
title: "ISS Overhead: Home",
|
|
date: iss.start,
|
|
endDate: iss.end,
|
|
icon: <Satellite size={20} />,
|
|
},
|
|
{
|
|
id: 'moon',
|
|
title: moon.title,
|
|
date: moon.start,
|
|
endDate: moon.end,
|
|
icon: <Moon size={20} />,
|
|
},
|
|
{
|
|
id: 'cosmic',
|
|
title: cosmic.title,
|
|
date: cosmic.start,
|
|
endDate: cosmic.end,
|
|
icon: <Sparkles size={20} />,
|
|
},
|
|
{
|
|
id: 'launch',
|
|
title: launch.title,
|
|
date: launch.start,
|
|
endDate: launch.end,
|
|
icon: <Rocket size={20} />,
|
|
}
|
|
], [iss, moon, cosmic, launch]);
|
|
|
|
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">
|
|
Georgew<span className="text-blue-500 font-black">Observatory</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) => (
|
|
<EventCard
|
|
key={`${event.id}-${event.date?.getTime() || 'none'}`}
|
|
id={event.id}
|
|
title={event.title}
|
|
targetDate={event.date}
|
|
endDate={event.endDate}
|
|
icon={event.icon}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |