32 lines
1.2 KiB
TypeScript
32 lines
1.2 KiB
TypeScript
"use client";
|
|
import { motion } from "framer-motion";
|
|
import { Rocket } from "lucide-react";
|
|
import { EventCardProps } from "@/types/space"
|
|
|
|
|
|
export default function EventCard({ title, targetDate, icon }: EventCardProps) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="relative p-6 rounded-xl border border-slate-800 bg-slate-900/50 backdrop-blur-md overflow-hidden group"
|
|
>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
|
|
|
|
<div className="flex items-center gap-4 mb-4">
|
|
<div className="p-2 bg-blue-500/10 rounded-lg text-blue-400">
|
|
{icon || <Rocket size={20} />}
|
|
</div>
|
|
<h3 className="text-slate-300 font-mono tracking-widest uppercase text-sm">{title}</h3>
|
|
</div>
|
|
|
|
<div className="text-4xl font-mono text-white flex gap-2">
|
|
<span>02</span><span className="text-slate-500">:</span>
|
|
<span>14</span><span className="text-slate-500">:</span>
|
|
<span>55</span>
|
|
</div>
|
|
|
|
<p className="text-xs text-slate-500 mt-2 font-mono uppercase">T-Minus to Horizon</p>
|
|
</motion.div>
|
|
);
|
|
} |