51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import clsx from 'clsx';
|
|
|
|
import { CProps } from '@/components/props';
|
|
import { useTooltipsStore } from '@/stores/tooltips';
|
|
import { APP_COLORS } from '@/styling/colors';
|
|
import { globals } from '@/utils/constants';
|
|
|
|
import { colorFgCstStatus } from '../colors';
|
|
import { CstClass, IConstituenta } from '../models/rsform';
|
|
|
|
interface BadgeConstituentaProps extends CProps.Styling {
|
|
/** Prefix for tooltip ID. */
|
|
prefixID?: string;
|
|
|
|
/** Constituenta to display. */
|
|
value: IConstituenta;
|
|
}
|
|
|
|
/**
|
|
* Displays a badge with a constituenta alias and information tooltip.
|
|
*/
|
|
function BadgeConstituenta({ value, prefixID, className, style }: BadgeConstituentaProps) {
|
|
const setActiveCst = useTooltipsStore(state => state.setActiveCst);
|
|
|
|
return (
|
|
<div
|
|
id={prefixID ? `${prefixID}${value.id}` : undefined}
|
|
className={clsx(
|
|
'min-w-[3.1rem] max-w-[3.1rem]',
|
|
'px-1',
|
|
'border rounded-md',
|
|
value.is_inherited && 'border-dashed',
|
|
'text-center font-medium whitespace-nowrap',
|
|
className
|
|
)}
|
|
style={{
|
|
borderColor: colorFgCstStatus(value.status),
|
|
color: colorFgCstStatus(value.status),
|
|
backgroundColor: value.cst_class === CstClass.BASIC ? APP_COLORS.bgGreen25 : APP_COLORS.bgInput,
|
|
...style
|
|
}}
|
|
data-tooltip-id={globals.constituenta_tooltip}
|
|
onMouseEnter={() => setActiveCst(value)}
|
|
>
|
|
{value.alias}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default BadgeConstituenta;
|