InvokeAI/invokeai/frontend/web/src/common/components/IAISwitch.tsx
blessedcoolant e537b5d8e1 Revert "Merge branch 'main' into bugfix/reenable-ckpt-conversion-to-ram"
This reverts commit e0e70c9222, reversing
changes made to 0b184913b9.
2023-03-06 14:29:39 +13:00

61 lines
1.2 KiB
TypeScript

import {
FormControl,
FormControlProps,
FormLabel,
FormLabelProps,
Switch,
SwitchProps,
} from '@chakra-ui/react';
interface Props extends SwitchProps {
label?: string;
width?: string | number;
styleClass?: string;
formControlProps?: FormControlProps;
formLabelProps?: FormLabelProps;
}
/**
* Customized Chakra FormControl + Switch multi-part component.
*/
const IAISwitch = (props: Props) => {
const {
label,
isDisabled = false,
width = 'auto',
formControlProps,
formLabelProps,
styleClass,
...rest
} = props;
return (
<FormControl
isDisabled={isDisabled}
width={width}
className={`invokeai__switch-form-control ${styleClass}`}
display="flex"
columnGap="1rem"
alignItems="center"
justifyContent="space-between"
{...formControlProps}
>
<FormLabel
className="invokeai__switch-form-label"
whiteSpace="nowrap"
marginRight={0}
marginTop={0.5}
marginBottom={0.5}
fontSize="sm"
fontWeight="bold"
width="auto"
{...formLabelProps}
>
{label}
</FormLabel>
<Switch className="invokeai__switch-root" {...rest} />
</FormControl>
);
};
export default IAISwitch;