1
import { Button, Checkbox as AntdCheckbox, Space } from "antd";
2
import { ReactNode } from "react";
3

4
interface Props {
5
  children: ReactNode;
6
  checked: boolean;
7
  defaultValue?: boolean;
8
  onChange: (boolean) => void;
9
}
10
export default function Checkbox({
11
  children,
12
  checked,
13
  defaultValue,
14
  onChange,
15
}: Props) {
16
  const check = (
17
    <AntdCheckbox
18
      checked={checked}
19
      onChange={(e) => onChange(e.target.checked)}
20
    >
21
      {children}
22
    </AntdCheckbox>
23
  );
24
  if (defaultValue == null) return check;
25
  return (
26
    <Space>
27
      {check}{" "}
28
      <Button
29
        type="dashed"
30
        disabled={checked == defaultValue}
31
        style={{ marginLeft: "5px" }}
32
        onClick={() => onChange(defaultValue)}
33
      >
34
        ({defaultValue ? "default is checked" : "default is unchecked"})
35
      </Button>
36
    </Space>
37
  );
38
}
39

40