46 lines
1.4 KiB
JavaScript
46 lines
1.4 KiB
JavaScript
import Checkbox from '@mui/material/Checkbox'
|
|
import CheckBoxIcon from '@mui/icons-material/CheckBox'
|
|
import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank'
|
|
import React from 'react'
|
|
import { Label2, Info3 } from 'src/components/typography'
|
|
import WarningIcon from 'src/styling/icons/warning-icon/comet.svg?react'
|
|
|
|
import { fontSize2, fontSize3 } from 'src/styling/variables'
|
|
|
|
const CheckboxInput = ({ name, onChange, value, settings, ...props }) => {
|
|
const { enabled, label, disabledMessage, rightSideLabel } = settings
|
|
|
|
return (
|
|
<>
|
|
{enabled ? (
|
|
<div className="flex">
|
|
{!rightSideLabel && <Label2>{label}</Label2>}
|
|
<Checkbox
|
|
id={name}
|
|
onChange={onChange}
|
|
value={value}
|
|
checked={value}
|
|
icon={
|
|
<CheckBoxOutlineBlankIcon
|
|
style={{ marginLeft: 2, fontSize: fontSize3 }}
|
|
/>
|
|
}
|
|
checkedIcon={<CheckBoxIcon style={{ fontSize: fontSize2 }} />}
|
|
disableRipple
|
|
{...props}
|
|
/>
|
|
{rightSideLabel && <Label2>{label}</Label2>}
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-2">
|
|
<WarningIcon />
|
|
<Info3 className="flex items-center text-comet m-0 whitespace-break-spaces">
|
|
{disabledMessage}
|
|
</Info3>
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default CheckboxInput
|