| 1 |
import classNames from 'classnames'; |
| 2 |
|
| 3 |
export const CheckboxInputCard = (props) => { |
| 4 |
const { label, description, Icon, checked, ...rest } = props; |
| 5 |
return ( |
| 6 |
<label |
| 7 |
className="flex h-full w-full items-center justify-between p-4 font-semibold text-gray-900" |
| 8 |
htmlFor={props.id}> |
| 9 |
<div className="flex flex-auto items-center"> |
| 10 |
<span className="relative mr-3 inline-block h-5 w-5 align-middle rtl:ml-3 rtl:mr-0"> |
| 11 |
<input |
| 12 |
{...rest} |
| 13 |
checked={checked} |
| 14 |
className="m-0 h-5 w-5 rounded-sm" |
| 15 |
type="checkbox" |
| 16 |
/> |
| 17 |
<svg |
| 18 |
className={classNames('absolute inset-0 -mt-px block h-5 w-5', { |
| 19 |
'text-white': checked, |
| 20 |
'text-transparent': !checked, |
| 21 |
})} |
| 22 |
viewBox="1 0 20 20" |
| 23 |
fill="none" |
| 24 |
xmlns="http://www.w3.org/2000/svg" |
| 25 |
role="presentation"> |
| 26 |
<path |
| 27 |
d="M8.72912 13.7449L5.77536 10.7911L4.76953 11.7899L8.72912 15.7495L17.2291 7.24948L16.2304 6.25073L8.72912 13.7449Z" |
| 28 |
fill="currentColor" |
| 29 |
/> |
| 30 |
</svg> |
| 31 |
</span> |
| 32 |
<span> |
| 33 |
<span className="text-sm font-medium">{label}</span> |
| 34 |
{description ? ( |
| 35 |
<span className="block pr-4 pt-1 font-normal text-gray-700 rtl:pl-4 rtl:pr-0"> |
| 36 |
{description} |
| 37 |
</span> |
| 38 |
) : ( |
| 39 |
<span /> |
| 40 |
)} |
| 41 |
</span> |
| 42 |
</div> |
| 43 |
{Icon && <Icon className="h-6 w-6 flex-none text-design-main" />} |
| 44 |
</label> |
| 45 |
); |
| 46 |
}; |
| 47 |
|
