added checkbox with issue

package.json

@@ -9,19 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "classnames": "^2.5.1",
+    "next": "14.0.4",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.0.4"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.4",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
-    "eslint": "^8",
-    "eslint-config-next": "14.0.4"
+    "typescript": "^5"
   }
 }

src/app/assets/icons/CheckIcon.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import cx from "classnames";
+
+interface Props {
+  className?: string;
+}
+
+const CheckIcon: React.FC<Props> = ({ className }) => {
+  return (
+    <svg className={cx("h-5 w-5", className)} viewBox="0 0 25 25">
+      <defs>
+        <clipPath id="clip-path">
+          <rect
+            id="Rectangle_1317"
+            data-name="Rectangle 1317"
+            width="25"
+            height="25"
+            transform="translate(-0.217)"
+            fill="#5dff00"
+            stroke="#707070"
+            stroke-width="1"
+          />
+        </clipPath>
+      </defs>
+      <path
+        id="check-solid"
+        d="M24.744,5.881a1.774,1.774,0,0,1,0,2.528L10.3,22.693a1.822,1.822,0,0,1-2.556,0L.525,15.551a1.774,1.774,0,0,1,0-2.528,1.822,1.822,0,0,1,2.556,0L9.027,18.9,22.194,5.881a1.822,1.822,0,0,1,2.556,0Z"
+        fill="current"
+      />
+    </svg>
+  );
+};
+
+export default CheckIcon;

src/app/page.tsx

@@ -1,15 +1,30 @@
-import React from "react";
+"use client";
+import React, { useState } from "react";
 import "tailwindcss/tailwind.css";
+import cx from "classnames";
+import CustomCheckbox from "./shared-resources/components/CustomCheckbox";
 
 interface Props {}
 
 const Home: React.FC<Props> = (props) => {
+  const [isChecked, setIsChecked] = useState(false);
+
   return (
     <div className="flex flex-col justify-center items-center w-full h-[50vh]">
-      <span className="text-5xl font-mono font-extrabold">
+      <span className="text-5xl font-mono font-extrabold mb-4">
         Simplest Docs
         <span className="font-serif font-semibold"> on the web! </span>
       </span>
+      <CustomCheckbox
+        size="large"
+        label="Yes, let's see 'em!"
+        checkboxStyles={cx("rounded-lg w-[30px] h-[30px] transition-opacity")}
+        className={cx("transition-opacity delay-200")}
+        value={isChecked}
+        onChange={() => {
+          setIsChecked(!isChecked);
+        }}
+      />
     </div>
   );
 };

src/app/shared-resources/components/CustomCheckbox.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import cx from "classnames";
+import CheckIcon from "@/app/assets/icons/CheckIcon";
+
+interface Props {
+  size: "large" | "small";
+  name?: string;
+  onChange?: (event: any) => void;
+  value?: boolean;
+  disabled?: boolean;
+  label?: string;
+  readOnly?: boolean;
+  checkboxStyles?: string;
+  className?: string;
+}
+
+const CustomCheckbox = ({
+  onChange,
+  value,
+  disabled,
+  label,
+  name,
+  readOnly = false,
+  className,
+  checkboxStyles,
+  size,
+}: Props) => {
+  const animationClassName = cx(
+    "absolute bg-primary/50 animate-ping rounded-full",
+    { "h-8 w-8 bottom-[7px] -left-[1px]": size === "large" },
+    { "h-6 w-6 bottom-[5px] -left-[2px]": size === "small" }
+  );
+
+  return (
+    <div className={cx("flex relative items-center", className)}>
+      <label className={cx("cursor-pointer relative")}>
+        {value && <span className={`${animationClassName}`}></span>}
+        {!value && <span className={`${animationClassName}`}></span>}
+        <input
+          readOnly={readOnly}
+          name={name}
+          onChange={onChange}
+          checked={value}
+          disabled={disabled}
+          type="checkbox"
+          className={cx(
+            "appearance-none border rounded-md",
+            value
+              ? "bg-primary border-primarys"
+              : "bg-white border-border-gray",
+            { "h-[30px] w-[30px]": size === "large" },
+            { "h-[20px] w-[20px]": size === "small" }
+          )}
+        />
+        <CheckIcon
+          className={cx(
+            "fill-white absolute",
+            value ? "visible" : "visible",
+            { "!h-5 bottom-3 left-[5px]": size === "large" },
+            { "!h-3 bottom-[10px]": size === "small" }
+          )}
+        />
+      </label>
+      {label && <p className="ml-3">{label}</p>}
+    </div>
+  );
+};
+
+export default CustomCheckbox;