45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
import React from 'react'
|
|
import { styled } from '@stitches/react'
|
|
import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
|
|
import { CheckIcon } from './images/CheckIcon'
|
|
|
|
const Checkbox = styled(CheckboxPrimitive.Root, {
|
|
all: 'unset',
|
|
width: 16,
|
|
height: 16,
|
|
minWidth: 16,
|
|
minHeight: 16,
|
|
borderRadius: 3,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
})
|
|
|
|
const CheckboxIndicator = styled(CheckboxPrimitive.Indicator, {
|
|
color: '#FFFFFF',
|
|
})
|
|
|
|
export const CheckboxComponent: React.FC<{
|
|
checked: boolean
|
|
setChecked: (arg: boolean) => void
|
|
}> = ({ checked, setChecked }) => {
|
|
const toggleChecked = () => setChecked(!checked)
|
|
|
|
return (
|
|
<Checkbox
|
|
css={{
|
|
border: checked ? '2px solid #F9D354' : '2px solid #3F3E3C4D',
|
|
backgroundColor: checked ? '#F9D354' : '#FFFFFF',
|
|
}}
|
|
checked={checked}
|
|
onCheckedChange={toggleChecked}
|
|
>
|
|
<CheckboxIndicator>
|
|
<CheckIcon />
|
|
</CheckboxIndicator>
|
|
</Checkbox>
|
|
)
|
|
}
|
|
|
|
export default CheckboxComponent
|