From 10a9d5291bd427a549eb8b8788054d759ab7381a Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sat, 9 Sep 2023 17:25:49 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Refactor=20Checkbox=20component?=
 =?UTF-8?q?=20=F0=9F=93=A6=20Improve=20code=20structure=20and=20readabilit?=
 =?UTF-8?q?y=20=F0=9F=93=9D=20Add=20defaultChecked=20prop=20=F0=9F=94=84?=
 =?UTF-8?q?=20Simplify=20onChange=20callback=20=F0=9F=A7=B9=20Remove=20unu?=
 =?UTF-8?q?sed=20imports?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/shared/Checkbox.tsx b/src/shared/Checkbox.tsx
new file mode 100644
index 0000000..ca723c1
--- /dev/null
+++ b/src/shared/Checkbox.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import React, { FC } from "react";
+
+export interface CheckboxProps {
+  label?: string;
+  subLabel?: string;
+  className?: string;
+  name: string;
+  defaultChecked?: boolean;
+  onChange?: (checked: boolean) => void;
+}
+
+const Checkbox: FC<CheckboxProps> = ({
+  subLabel = "",
+  label = "",
+  name,
+  className = "",
+  defaultChecked,
+  onChange,
+}) => {
+  return (
+    <div className={`flex text-sm sm:text-base ${className}`}>
+      <input
+        id={name}
+        name={name}
+        type="checkbox"
+        className="focus:ring-action-primary h-6 w-6 text-primary-500 border-primary rounded border-neutral-500 bg-white dark:bg-neutral-700  dark:checked:bg-primary-500 focus:ring-primary-500"
+        defaultChecked={defaultChecked}
+        onChange={(e) => onChange && onChange(e.target.checked)}
+      />
+      {label && (
+        <label
+          htmlFor={name}
+          className="ml-3.5 flex flex-col flex-1 justify-center"
+        >
+          <span className=" text-neutral-900 dark:text-neutral-100">
+            {label}
+          </span>
+          {subLabel && (
+            <p className="mt-1 text-neutral-500 dark:text-neutral-400 text-sm font-light">
+              {subLabel}
+            </p>
+          )}
+        </label>
+      )}
+    </div>
+  );
+};
+
+export default Checkbox;