plane/web/components/ui/toggle-switch.tsx

import { Switch } from "@headlessui/react";

type Props = {
  value: boolean;
  onChange: (value: boolean) => void;
  label?: string;
  size?: "sm" | "md" | "lg";
  disabled?: boolean;
  className?: string;
};

export const ToggleSwitch: React.FC<Props> = (props) => {
  const { value, onChange, label, size = "sm", disabled, className } = props;

  return (
    <Switch
      checked={value}
      disabled={disabled}
      onChange={onChange}
      className={`relative flex-shrink-0 inline-flex ${
        size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10"
      } flex-shrink-0 cursor-pointer rounded-full border border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none ${
        value ? "bg-custom-primary-100" : "bg-gray-700"
      } ${className || ""} ${disabled ? "cursor-not-allowed" : ""}`}
    >
      <span className="sr-only">{label}</span>
      <span
        aria-hidden="true"
        className={`self-center inline-block ${
          size === "sm" ? "h-2 w-2" : size === "md" ? "h-3 w-3" : "h-4 w-4"
        } transform rounded-full shadow ring-0 transition duration-200 ease-in-out ${
          value
            ? (size === "sm" ? "translate-x-3" : size === "md" ? "translate-x-4" : "translate-x-5") + " bg-white"
            : "translate-x-0.5 bg-custom-background-90"
        } ${disabled ? "cursor-not-allowed" : ""}`}
      />
    </Switch>
  );
};