diff --git a/src/renderer/components/checkbox/index.tsx b/src/renderer/components/checkbox/index.tsx new file mode 100644 index 00000000..b054f759 --- /dev/null +++ b/src/renderer/components/checkbox/index.tsx @@ -0,0 +1,32 @@ +import { forwardRef } from 'react'; +import { Checkbox as MantineCheckbox, CheckboxProps } from '@mantine/core'; +import styled from 'styled-components'; + +const StyledCheckbox = styled(MantineCheckbox)` + & .mantine-Checkbox-input { + background-color: var(--input-bg); + + &:checked { + background-color: var(--primary-color); + border-color: var(--primary-color); + } + + &:hover:not(:checked) { + background-color: var(--primary-color); + opacity: 0.5; + } + + transition: none; + } +`; + +export const Checkbox = forwardRef( + ({ ...props }: CheckboxProps, ref) => { + return ( + + ); + }, +); diff --git a/src/renderer/components/index.ts b/src/renderer/components/index.ts index f2d5c722..45757591 100644 --- a/src/renderer/components/index.ts +++ b/src/renderer/components/index.ts @@ -32,3 +32,4 @@ export * from './query-builder'; export * from './rating'; export * from './hover-card'; export * from './option'; +export * from './checkbox';