44 lines
1.1 KiB
JavaScript
44 lines
1.1 KiB
JavaScript
"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, setChecked, id, ...props }) => {
|
|
const [isChecked, setIsChecked] = useState(false);
|
|
return (
|
|
<>
|
|
<input
|
|
type="checkbox"
|
|
id={id}
|
|
className={styles.check}
|
|
checked={checked}
|
|
onChange={() => {
|
|
setIsChecked(!isChecked);
|
|
setChecked();
|
|
}}
|
|
{...props}
|
|
/>
|
|
|
|
<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;
|