29 lines
914 B
TypeScript
29 lines
914 B
TypeScript
|
import type { SimulationStatus } from '@/api/types';
|
||
|
|
|
||
|
|
const LABELS: Record<SimulationStatus, string> = {
|
||
|
|
pending: 'Pending',
|
||
|
|
in_progress: 'In progress',
|
||
|
|
review_required: 'Review required',
|
||
|
|
done: 'Done',
|
||
|
|
};
|
||
|
|
|
||
|
|
// pending=fog, in_progress=primary-soft, review_required=bloom-coral, done=storm-deep
|
||
|
|
const STYLES: Record<SimulationStatus, string> = {
|
||
|
|
pending: 'bg-fog text-charcoal border border-hairline',
|
||
|
|
in_progress: 'bg-primary-soft text-primary-deep',
|
||
|
|
review_required: 'bg-bloom-coral text-canvas',
|
||
|
|
done: 'bg-storm-deep text-canvas',
|
||
|
|
};
|
||
|
|
|
||
|
|
export function SimulationStatusBadge({ status }: { status: SimulationStatus }): 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="simulation-status-badge"
|
||
|
|
data-status={status}
|
||
|
|
>
|
||
|
|
{LABELS[status]}
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
}
|