80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo } from 'react';
|
|
import EventCard from '@/components/EventCard';
|
|
import { Satellite, Rocket, Moon, Sparkles } from 'lucide-react';
|
|
import { MissionControlProps } from '@/types/space';
|
|
import { motion } from 'framer-motion';
|
|
|
|
|
|
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="w-full max-w-4xl relative flex p-8 overflow-hidden">
|
|
<div className="z-10 grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-10 w-full max-w-5xl">
|
|
{events.map((event, index) => (
|
|
<motion.div
|
|
key={event.id}
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{
|
|
duration: 1.2,
|
|
delay: index * 0.15,
|
|
ease: [0.16, 1, 0.3, 1]
|
|
}}
|
|
className="flex flex-col gap-3"
|
|
>
|
|
<div key={event.id} className="flex flex-col gap-3">
|
|
<div className="flex items-center gap-2 px-1">
|
|
<div className="h-[1px] w-4 bg-blue-500/50" />
|
|
<span className="text-[10px] font-bold font-mono tracking-[0.2em] text-blue-400/70 uppercase">
|
|
{event.id === 'iss' && "ISS Zenith // CPH"}
|
|
{event.id === 'moon' && "Lunar Cycle"}
|
|
{event.id === 'cosmic' && "Celestial Event"}
|
|
{event.id === 'launch' && "Launch Schedule"}
|
|
</span>
|
|
</div>
|
|
<EventCard
|
|
id={event.id}
|
|
title={event.title}
|
|
targetDate={event.date}
|
|
endDate={event.endDate}
|
|
icon={event.icon}
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |