InvokeAI/invokeai/frontend/web/src/common/components/IAISimpleCheckbox.tsx
psychedelicious 3b9426eb72 feat(ui): controlnet/image dnd wip
Implement `dnd-kit` for image drag and drop
- vastly simplifies logic bc we can drag and drop non-serializable data (like an `ImageDTO`)
- also much prettier
- also will fix conflicts with file upload via OS drag and drop, bc `dnd-kit` does not use native HTML drag and drop API
- Implemented for Init image, controlnet, and node editor so far

More progress on the ControlNet UI
2023-06-04 22:34:58 +10:00

20 lines
484 B
TypeScript

import { Checkbox, CheckboxProps, Text } from '@chakra-ui/react';
import { memo, ReactNode } from 'react';
type IAISimpleCheckboxProps = CheckboxProps & {
label: string | ReactNode;
};
const IAISimpleCheckbox = (props: IAISimpleCheckboxProps) => {
const { label, ...rest } = props;
return (
<Checkbox colorScheme="accent" {...rest}>
<Text color="base.200" fontSize="md">
{label}
</Text>
</Checkbox>
);
};
export default memo(IAISimpleCheckbox);