From a2a47d7f141caeb2f74408e37fea4f9ceb8473c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”>
Date: Wed, 27 Jul 2022 19:36:44 +0300
Subject: [PATCH] A checkbox with a label

---
 src/components/Checkbox.tsx | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/components/Checkbox.tsx

diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
new file mode 100644
index 0000000..ca6386e
--- /dev/null
+++ b/src/components/Checkbox.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+
+type CheckBoxProps = {
+  /**
+   * here any text can be written to be a label for the checkbox
+   */
+  label: string;
+  /**
+   * onChange callback
+   */
+  onChange?: (value: boolean) => void;
+} & Omit<React.HTMLProps<HTMLInputElement>, "onChange" | "type">;
+
+const CheckBox = ({ className, onChange, label, ...props }: CheckBoxProps) => {
+  return (
+    <div className="d-flex align-center">
+      <input
+        onChange={() => onChange && onChange(!props.checked)}
+        className="hover:bg-sky-700 focus:bg-sky-900 active:bg-sky-300 text-black"
+        type="checkbox"
+        {...props}
+      />
+      <label> {label} </label>
+    </div>
+  );
+};
+
+export default CheckBox;