Toggle.tsx

import { Dispatch, SetStateAction } from "react";
import { Switch } from "@nextui-org/react";
import { disabledCursor } from "./utils/classes.ts";

type ToggleProps = {
  isDisabled?: boolean;
  isSelected: boolean;
  setIsSelected?: Dispatch<SetStateAction<boolean>>;
  label?: string;
};

const Toggle = ({
  isDisabled = false,
  isSelected,
  setIsSelected,
  label,
}: ToggleProps) => {
  const selectedClass = isSelected
    ? "group-data-[selected=true]:ml-0 bg-primary"
    : "ml-[11px] bg-grey";
  return (
    <Switch
      isDisabled={isDisabled}
      // Does not support "isRequired": https://github.com/nextui-org/nextui/issues/1610
      isSelected={isSelected}
      onValueChange={setIsSelected}
      color="default"
      classNames={{
        base: disabledCursor(isDisabled),
        thumb: `h-[14px] w-[14px] ${selectedClass}`,
        wrapper:
          "h-[8px] w-[25px] p-0 overflow-visible bg-lightGrey dark:bg-mediumGrey",
      }}
    >
      {label}
    </Switch>
  );
};

export default Toggle;