55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useEffect, useState } from 'react';
|
||
|
|
import { checkHealth } from '@/lib/api';
|
||
|
|
import { Shield } from 'lucide-react';
|
||
|
|
|
||
|
|
export default function PortalHeader() {
|
||
|
|
const [nodeStatus, setNodeStatus] = useState<'online' | 'offline' | 'checking'>('checking');
|
||
|
|
const [nodeVersion, setNodeVersion] = useState('');
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
let mounted = true;
|
||
|
|
async function poll() {
|
||
|
|
try {
|
||
|
|
const h = await checkHealth();
|
||
|
|
if (!mounted) return;
|
||
|
|
setNodeStatus('online');
|
||
|
|
setNodeVersion(h.node);
|
||
|
|
} catch {
|
||
|
|
if (!mounted) return;
|
||
|
|
setNodeStatus('offline');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
poll();
|
||
|
|
const iv = setInterval(poll, 30_000);
|
||
|
|
return () => { mounted = false; clearInterval(iv); };
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<header className="sticky top-0 z-40 h-14 flex items-center justify-between px-6 glass border-b border-surface-800">
|
||
|
|
{/* Page title slot — parent fills with children */}
|
||
|
|
<div className="flex items-center gap-3" />
|
||
|
|
|
||
|
|
{/* Right side */}
|
||
|
|
<div className="flex items-center gap-4">
|
||
|
|
{/* Node status */}
|
||
|
|
<div className="flex items-center gap-2 text-xs">
|
||
|
|
<span
|
||
|
|
className={`status-dot status-dot--${nodeStatus === 'online' ? 'online' : 'offline'}`}
|
||
|
|
/>
|
||
|
|
<span className="text-surface-400">
|
||
|
|
{nodeStatus === 'online' ? `Node ${nodeVersion}` : 'Offline'}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Wallet badge placeholder */}
|
||
|
|
<div className="flex items-center gap-2 px-3 py-1.5 rounded-lg glass text-xs text-surface-300">
|
||
|
|
<Shield className="w-3.5 h-3.5 text-accent-cyan" />
|
||
|
|
Wallet Connected
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
);
|
||
|
|
}
|