28 lines
870 B
TypeScript
28 lines
870 B
TypeScript
|
import type { EngagementStatus } from '@/api/types';
|
||
|
|
|
||
|
|
const LABELS: Record<EngagementStatus, string> = {
|
||
|
|
planned: 'Planned',
|
||
|
|
active: 'Active',
|
||
|
|
closed: 'Closed',
|
||
|
|
};
|
||
|
|
|
||
|
|
const STYLES: Record<EngagementStatus, string> = {
|
||
|
|
// Outlined ink for planned (neutral), filled primary for active (engagement live),
|
||
|
|
// outlined steel for closed (muted). Stays within DESIGN.md palette.
|
||
|
|
planned: 'bg-canvas text-ink border border-ink',
|
||
|
|
active: 'bg-primary text-ink-on',
|
||
|
|
closed: 'bg-cloud text-graphite border border-hairline',
|
||
|
|
};
|
||
|
|
|
||
|
|
export function StatusBadge({ status }: { status: EngagementStatus }): JSX.Element {
|
||
|
|
return (
|
||
|
|
<span
|
||
|
|
className={`inline-flex items-center rounded-lg px-3 py-[6px] text-[14px] leading-[1.3] font-medium ${STYLES[status]}`}
|
||
|
|
data-testid="status-badge"
|
||
|
|
data-status={status}
|
||
|
|
>
|
||
|
|
{LABELS[status]}
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
}
|