sendou.ink/app/components/Toggle.tsx

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

export function Toggle({
	checked,
	setChecked,
	tiny,
	id,
	name,
	disabled,
}: {
	checked: boolean;
	setChecked: (checked: boolean) => void;
	tiny?: boolean;
	id?: string;
	name?: string;
	disabled?: boolean;
}) {
	return (
		<Switch
			checked={checked}
			onChange={setChecked}
			className={clsx("toggle", { checked, tiny })}
			id={id}
			name={name}
			data-testid={id ? `toggle-${id}` : null}
			disabled={disabled}
		>
			<span className={clsx("toggle-dot", { checked, tiny })} />
		</Switch>
	);
}