Add switches

frontend/src/app/components/checkbox/CheckBox.jsx

@@ -0,0 +1,42 @@
+"use client";
+import { useState } from "react";
+import CheckIcon from "../icons/check";
+import styles from "./styles.module.css";
+import CloseIcon from "../icons/close";
+import CheckedIcon from "../icons/switchIcons/checked";
+import UnCheckedIcon from "../icons/switchIcons/unchecked";
+
+const CustomCheckbox = ({ checked, onChange, id }) => {
+  const [isChecked, setIsChecked] = useState(false);
+  return (
+    <>
+      <input
+        type="checkbox"
+        id={id}
+        className={styles.check}
+        checked={checked}
+        onChange={() => {
+          setIsChecked(!isChecked);
+          onChange;
+        }}
+      />
+
+      <label htmlFor={id} className={styles.switch}>
+        <span className={styles.knob}>
+          {isChecked ? (
+            <CheckedIcon
+              width={16}
+              height={16}
+              color="#4F378A"
+              viewBox="0 0 20 20"
+            />
+          ) : (
+            <UnCheckedIcon width={16} height={16} color="#fff" />
+          )}
+        </span>
+      </label>
+    </>
+  );
+};
+
+export default CustomCheckbox;

frontend/src/app/components/checkbox/styles.module.css

@@ -0,0 +1,46 @@
+.switch {
+  display: flex;
+  width: 53px;
+
+  height: 33px;
+  align-items: center;
+  background-color: white;
+  cursor: pointer;
+  padding: 0 2px;
+  border-radius: 150px;
+  position: relative;
+  border: 2px solid #6d6d6d;
+  overflow: hidden;
+}
+
+.check {
+  display: none;
+}
+
+/* The knob (replaces ::before) */
+.knob {
+  width: 25px;
+  height: 25px;
+  background-color: #6d6d6d;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  transition: all 0.15s ease-in-out;
+}
+.knob:hover {
+  box-shadow: 0 0 0px 5px #33333327;
+  background-color: #333;
+}
+
+.check:checked + .switch .knob {
+  transform: translateX(75%);
+  background-color: white;
+}
+
+/* Optional background change */
+.check:checked + .switch {
+  background-color: #8187ff;
+  border: 2px solid #8187ff;
+}