Source: MetricCard.jsx
import React from 'react';
export default function MetricCard({ label = 'LATENCE S2S', value = '142 ms', status = 'OPTIMAL' }) {
return (
<div style={{
background: '#121214',
border: '1px solid #27272A',
borderRadius: '8px',
padding: '16px 20px',
maxWidth: '320px',
color: '#F4F4F5',
fontFamily: 'Inter Tight, sans-serif'
}}>
<div style={{ fontSize: '11px', color: '#A1A1AA', letterSpacing: '0.05em', textTransform: 'uppercase', marginBottom: '8px' }}>
{label}
</div>
<div style={{ fontSize: '28px', fontWeight: 600, color: '#FFFFFF', fontFamily: 'Geist Mono, monospace' }}>
{value}
</div>
<div style={{ fontSize: '10px', color: '#A1A1AA', marginTop: '8px', display: 'flex', alignItems: 'center', gap: '6px' }}>
<span style={{ width: '6px', height: '6px', borderRadius: '50%', background: '#22C55E' }}></span>
STATUS: {status} // RING 0 VERIFIED
</div>
</div>
);
}