33 lines
897 B
TypeScript
33 lines
897 B
TypeScript
import clsx from "clsx";
|
|
import {ReactElement, ReactNode} from "react";
|
|
import {BsCheck} from "react-icons/bs";
|
|
|
|
interface Props {
|
|
isChecked: boolean;
|
|
onChange: (isChecked: boolean) => void;
|
|
children?: ReactNode;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export default function Checkbox({isChecked, onChange, children, disabled}: Props) {
|
|
return (
|
|
<div
|
|
className="flex gap-3 items-center text-mti-gray-dim text-sm cursor-pointer"
|
|
onClick={() => {
|
|
if (disabled) return;
|
|
onChange(!isChecked);
|
|
}}>
|
|
<input type="checkbox" className="hidden" />
|
|
<div
|
|
className={clsx(
|
|
"w-6 h-6 min-w-6 min-h-6 rounded-md flex items-center justify-center border border-mti-purple-light bg-white",
|
|
"transition duration-300 ease-in-out",
|
|
isChecked && "!bg-mti-purple-light ",
|
|
)}>
|
|
<BsCheck color="white" className="w-full h-full" />
|
|
</div>
|
|
<span>{children}</span>
|
|
</div>
|
|
);
|
|
}
|