90 lines
3.5 KiB
TypeScript
90 lines
3.5 KiB
TypeScript
|
import { X, Ruler, Activity } from 'lucide-react';
|
||
|
|
import type { CelestialBody } from '../types';
|
||
|
|
|
||
|
|
interface FocusInfoProps {
|
||
|
|
body: CelestialBody | null;
|
||
|
|
onClose: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function FocusInfo({ body, onClose }: FocusInfoProps) {
|
||
|
|
if (!body) return null;
|
||
|
|
|
||
|
|
// Calculate distance if position is available
|
||
|
|
const pos = body.positions[0];
|
||
|
|
const distance = pos ? Math.sqrt(pos.x ** 2 + pos.y ** 2 + pos.z ** 2).toFixed(2) : '---';
|
||
|
|
|
||
|
|
const isProbe = body.type === 'probe';
|
||
|
|
const isActive = body.is_active !== false;
|
||
|
|
|
||
|
|
return (
|
||
|
|
// Remove fixed positioning, now handled by parent container (Html component in 3D)
|
||
|
|
<div className="flex flex-col items-center pointer-events-none -translate-y-24">
|
||
|
|
{/* Main Info Card */}
|
||
|
|
<div className="bg-black/80 backdrop-blur-xl border border-white/10 rounded-2xl p-5 min-w-[280px] max-w-sm shadow-2xl pointer-events-auto relative group mb-2">
|
||
|
|
|
||
|
|
{/* Close Button */}
|
||
|
|
<button
|
||
|
|
onClick={(e) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
onClose();
|
||
|
|
}}
|
||
|
|
className="absolute top-3 right-3 text-gray-400 hover:text-white transition-colors p-1 rounded-full hover:bg-white/10"
|
||
|
|
>
|
||
|
|
<X size={16} />
|
||
|
|
</button>
|
||
|
|
|
||
|
|
{/* Header */}
|
||
|
|
<div className="flex items-start justify-between mb-3 pr-6">
|
||
|
|
<div>
|
||
|
|
<div className="flex items-center gap-2 mb-1">
|
||
|
|
<h2 className="text-xl font-bold text-white tracking-tight">
|
||
|
|
{body.name_zh || body.name}
|
||
|
|
</h2>
|
||
|
|
<span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider border ${
|
||
|
|
isProbe
|
||
|
|
? 'bg-purple-500/20 border-purple-500/40 text-purple-300'
|
||
|
|
: 'bg-blue-500/20 border-blue-500/40 text-blue-300'
|
||
|
|
}`}>
|
||
|
|
{isProbe ? '探测器' : '天体'}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<p className="text-xs text-gray-400 line-clamp-2 leading-relaxed">
|
||
|
|
{body.description || '暂无描述'}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Stats Grid */}
|
||
|
|
<div className="grid grid-cols-2 gap-2">
|
||
|
|
<div className="bg-white/5 rounded-lg p-2 flex items-center gap-2.5 border border-white/5">
|
||
|
|
<div className="p-1.5 rounded-full bg-blue-500/20 text-blue-400">
|
||
|
|
<Ruler size={14} />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div className="text-[9px] text-gray-500 uppercase">日心距离</div>
|
||
|
|
<div className="text-xs font-mono text-gray-200">{distance} AU</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{isProbe && (
|
||
|
|
<div className="bg-white/5 rounded-lg p-2 flex items-center gap-2.5 border border-white/5">
|
||
|
|
<div className={`p-1.5 rounded-full ${isActive ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'}`}>
|
||
|
|
<Activity size={14} />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div className="text-[9px] text-gray-500 uppercase">状态</div>
|
||
|
|
<div className={`text-xs font-medium ${isActive ? 'text-green-300' : 'text-red-300'}`}>
|
||
|
|
{isActive ? '运行中' : '已失效'}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Connecting Line/Triangle pointing down to the body */}
|
||
|
|
<div className="w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-t-[8px] border-t-black/80 backdrop-blur-xl mt-[-1px]"></div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|