Input Check List

import { useEffect, useState } from "react";
import styled from "styled-components";
export default function InputCheckList({
  dataList, //[{text:'All',value:'all',checked: false, disabled: false}]
  onChange,
  className,
  gapY = "10px",
  style,
  isMultiple = true,
}) {
  const [checkList, setCheckList] = useState([]);

  useEffect(() => {
    if (dataList) {
      setCheckList([...dataList]);
    }
  }, [dataList]);

  const handleChange = (e, index) => {
    let isChecked = e.target.checked;
    if (checkList?.length > 0) {
      let tmp = [...checkList];
      if (!tmp[index]?.disabled) {
        tmp[index].checked = isChecked;
        if (!isMultiple) {
          for (let i = 0; i < checkList?.length; i++) {
            if (i != index) {
              tmp[i].checked = false;
            }
          }
        }
        setCheckList([...tmp]);
        if (onChange) {
          onChange(tmp);
        }
      }
    }
  };

  return (
    <Styled className={className} style={style} $gapY={gapY}>
      {checkList.map((item, index) => (
        <div key={"select-" + index} className={"item"}>
          <label className={"label"}>
            <input
              type="checkbox"
              onChange={(e) => handleChange(e, index)}
              checked={item?.checked}
              className={"check_box"}
              disabled={item?.disabled ? true : false}
            />
            <span
              className={
                "check_mark" + (item?.disabled ? " check_box_disable" : "")
              }
            ></span>

            <div className="item_data">
              {item?.view ? item.view : item.text}
            </div>
          </label>
        </div>
      ))}
    </Styled>
  );
}
const Styled = styled.div`
  position: relative;

  .item {
    display: block;
    position: relative;
    margin-bottom: ${({ $gapY }) => $gapY};
  }

  .check_mark {
    position: absolute;
    top: 2px;
    left: -2px;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 5px;
    background: #fafbfc;
    border: 2px solid #dfe1e6;
  }
  .check_box {
    position: absolute;
    top: 5px;
  }
  .check_box:checked ~ .check_mark {
    background-color: var(--primary);
  }
  .check_mark:after {
    content: "";
    position: absolute;
    display: none;
    cursor: pointer;
  }
  .check_box:checked ~ .check_mark:after {
    display: block;
    cursor: pointer;
  }

  .item .check_mark:after {
    left: 5px;
    top: 0px;
    width: 4px;
    height: 10px;
    border: solid white;
    cursor: pointer;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .check_box_disable {
    background-color: #ddd !important;
  }
  label {
    min-width: 20px;
    cursor: pointer;
    display: flex;
    user-select: none;
  }
  .item_data {
    margin-left: 30px;
  }
`;

import InputCheckList from "../../example/InputCheckList";

export default function TestView() {
  return (
    <div className="test-view">
      <InputCheckList
        dataList={[
          { text: "All", value: "all", checked: false, disabled: false },
          {
            text: "Option 1",
            value: "option-1",
            checked: false,
            disabled: false,
          },
        ]}
      />
    </div>
  );
}