gahusb
1630109856
- state→color mapping via STATE_COLORS - notification badge with 9+ overflow - active prop for selected card border Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
31 lines
1.1 KiB
JavaScript
31 lines
1.1 KiB
JavaScript
// src/pages/agent-office/components/AgentCard.jsx
|
|
import { AGENT_META, STATE_COLORS, DEFAULT_STATE_COLOR } from '../constants.js';
|
|
|
|
export default function AgentCard({ agentId, agentState, notificationCount = 0, active = false, onClick }) {
|
|
const meta = AGENT_META[agentId];
|
|
if (!meta) return null;
|
|
|
|
const state = agentState?.state || 'idle';
|
|
const stateInfo = STATE_COLORS[state] || DEFAULT_STATE_COLOR;
|
|
const dotClass = `ao-card-dot ${state}${stateInfo.pulse ? ' pulse' : ''}`;
|
|
const badgeText = notificationCount > 9 ? '9+' : String(notificationCount);
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={`ao-card${active ? ' active' : ''}`}
|
|
onClick={onClick}
|
|
style={{ '--card-accent': meta.color }}
|
|
>
|
|
<span className={dotClass} title={state} />
|
|
{notificationCount > 0 && (
|
|
<span className="ao-card-badge">{badgeText}</span>
|
|
)}
|
|
<div className="ao-card-image">
|
|
<img src={meta.image} alt={meta.displayName} />
|
|
</div>
|
|
<div className="ao-card-name">{meta.displayName}</div>
|
|
</button>
|
|
);
|
|
}
|