44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
|
import clsx from 'clsx';
|
||
|
|
|
||
|
|
import { useConceptOptions } from '@/context/OptionsContext';
|
||
|
|
import { ExpressionStatus } from '@/models/rsform';
|
||
|
|
import { colorBgCstStatus } from '@/styling/color';
|
||
|
|
import { prefixes } from '@/utils/constants';
|
||
|
|
import { describeExpressionStatus, labelExpressionStatus } from '@/utils/labels';
|
||
|
|
|
||
|
|
interface InfoCstStatusProps {
|
||
|
|
title?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
function InfoCstStatus({ title }: InfoCstStatusProps) {
|
||
|
|
const { colors } = useConceptOptions();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className='flex flex-col gap-1 mb-2 dense'>
|
||
|
|
{title ? <h1>{title}</h1> : null}
|
||
|
|
{Object.values(ExpressionStatus)
|
||
|
|
.filter(status => status !== ExpressionStatus.UNDEFINED)
|
||
|
|
.map((status, index) => (
|
||
|
|
<p key={`${prefixes.cst_status_list}${index}`}>
|
||
|
|
<span
|
||
|
|
className={clsx(
|
||
|
|
'inline-block', // prettier: split lines
|
||
|
|
'min-w-[7rem]',
|
||
|
|
'px-1',
|
||
|
|
'border',
|
||
|
|
'text-center text-sm font-controls'
|
||
|
|
)}
|
||
|
|
style={{ backgroundColor: colorBgCstStatus(status, colors) }}
|
||
|
|
>
|
||
|
|
{labelExpressionStatus(status)}
|
||
|
|
</span>
|
||
|
|
<span> - </span>
|
||
|
|
<span>{describeExpressionStatus(status)}</span>
|
||
|
|
</p>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default InfoCstStatus;
|