jan/web/app/_components/ToggleSwitch/index.tsx

import React from "react";
import { Switch } from "@headlessui/react";
import { Controller } from "react-hook-form";

function classNames(...classes: any) {
  return classes.filter(Boolean).join(" ");
}

type Props = {
  id: string;
  title: string;
  control: any;
  required?: boolean;
};

const ToggleSwitch: React.FC<Props> = ({
  id,
  title,
  control,
  required = false,
}) => (
  <div className="flex items-center justify-between">
    <div className="text-gray-900 text-base">{title}</div>
    <Controller
      name={id}
      control={control}
      rules={{ required }}
      render={({ field: { value, onChange } }) => (
        <Switch
          checked={value}
          onChange={onChange}
          className={classNames(
            value ? "bg-indigo-600" : "bg-gray-200",
            "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
          )}
        >
          <span className="sr-only">Use setting</span>
          <span
            aria-hidden="true"
            className={classNames(
              value ? "translate-x-5" : "translate-x-0",
              "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
            )}
          />
        </Switch>
      )}
    />
  </div>
);

export default ToggleSwitch;