File size: 2,398 Bytes
0e23a69 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | const ROLES = ['CTO', 'CFO', 'Investor Rep', 'Independent']
const KEY_MAP = { 'CTO': 'cto', 'CFO': 'cfo', 'Investor Rep': 'inv', 'Independent': 'ind' }
// ASCII block bar
function AsciiTrustBar({ pct }) {
const total = 12
const filled = Math.round((pct / 100) * total)
return (
<span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.6rem', letterSpacing: 0 }}>
{'█'.repeat(filled)}{'░'.repeat(total - filled)}
</span>
)
}
export default function TrustPanel({ trust, prevTrust }) {
if (!trust) {
return (
<div className="card">
<div className="section-label">Board Trust</div>
<div className="card-body" style={{ fontSize: '0.65rem', color: 'var(--text-muted)' }}>
// awaiting first round...
</div>
</div>
)
}
return (
<div className="card">
<div className="section-label">Board Trust</div>
<div className="trust-list">
{ROLES.map((role) => {
const val = trust[role] ?? 0.5
const prev = prevTrust?.[role]
const delta = prev !== undefined ? val - prev : null
const cls = KEY_MAP[role]
const pct = Math.round(val * 100)
return (
<div key={role} className="trust-row">
<span className="trust-role">{role}</span>
<div className="trust-track">
<div
className={`trust-fill ${cls}`}
style={{ width: `${pct}%` }}
/>
</div>
<span className="trust-pct">{pct}%</span>
{delta !== null && Math.abs(delta) > 0.001 ? (
<span className={`trust-delta ${delta > 0 ? 'pos' : 'neg'}`}>
{delta > 0 ? '▲' : '▼'}
</span>
) : (
<span className="trust-delta" />
)}
</div>
)
})}
</div>
</div>
)
}
|