File size: 1,475 Bytes
ad8049f | 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 62 | import React from 'react';
interface StatusBadgeProps {
status: string;
style?: React.CSSProperties;
}
const StatusBadge: React.FC<StatusBadgeProps> = ({ status, style }) => {
const getStatusColor = (s: string) => {
switch (s?.toLowerCase()) {
case 'done':
case 'completed':
case 'approved':
return 'var(--success)';
case 'in_progress':
case 'running':
return 'var(--accent)';
case 'todo':
case 'queued':
return 'var(--text-dim)';
case 'failed':
case 'error':
return 'var(--danger)';
case 'awaiting_approval':
return 'var(--warning)';
default:
return 'var(--text-dim)';
}
};
const formatStatus = (s: string) => {
return (s || 'Unknown').replace(/_/g, ' ').toUpperCase();
};
return (
<span style={{
padding: '4px 8px',
borderRadius: '4px',
fontSize: '0.7rem',
fontWeight: 600,
background: 'rgba(255,255,255,0.05)',
border: `1px solid ${getStatusColor(status)}33`,
color: getStatusColor(status),
display: 'inline-flex',
alignItems: 'center',
gap: '4px',
...style
}}>
<span style={{
width: '6px',
height: '6px',
borderRadius: '50%',
background: getStatusColor(status),
boxShadow: `0 0 8px ${getStatusColor(status)}`
}} />
{formatStatus(status)}
</span>
);
};
export default StatusBadge;
|