68 lines
1.4 KiB
TypeScript
68 lines
1.4 KiB
TypeScript
import { ActionIcon, Group, Switch, Tooltip } from '@mantine/core';
|
|
import { FiPower, FiTrash } from 'react-icons/fi';
|
|
import { switchClasses, toolTipClasses } from 'styles';
|
|
|
|
export function ManagementPill({
|
|
enabled,
|
|
onChange,
|
|
openModal,
|
|
label = ['Disabled', 'Enabled'],
|
|
}: {
|
|
enabled: number;
|
|
onChange: any;
|
|
openModal: () => void;
|
|
label?: [string, string];
|
|
}) {
|
|
return (
|
|
<Group
|
|
style={{
|
|
width: 'fit-content',
|
|
backgroundColor:
|
|
'color-mix(in srgb, var(--mantine-color-background-0), transparent 50%)',
|
|
padding: '.5rem',
|
|
borderRadius: '10px',
|
|
color: 'var(--mantine-color-search-0)',
|
|
backdropFilter: 'brightness(0.5)',
|
|
}}
|
|
>
|
|
<Tooltip
|
|
className={toolTipClasses.default}
|
|
classNames={toolTipClasses}
|
|
label={label[enabled]}
|
|
refProp='rootRef'
|
|
withArrow
|
|
>
|
|
<Switch
|
|
className={switchClasses.enable}
|
|
classNames={switchClasses}
|
|
defaultChecked={enabled === 1}
|
|
defaultValue={enabled}
|
|
thumbIcon={
|
|
<FiPower
|
|
style={{
|
|
color: enabled === 1 ? 'var(--mantine-color-accent-0)' : 'red',
|
|
}}
|
|
/>
|
|
}
|
|
onChange={onChange}
|
|
/>
|
|
</Tooltip>
|
|
|
|
|
<Tooltip
|
|
className={toolTipClasses.default}
|
|
classNames={toolTipClasses}
|
|
label={'Delete'}
|
|
>
|
|
<ActionIcon
|
|
color='red'
|
|
onClick={() => {
|
|
openModal();
|
|
}}
|
|
>
|
|
<FiTrash color='black' />
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
</Group>
|
|
);
|
|
}
|