forked from github/plane
87abf3ccb1
* style: project settings navigation sidebar added * chore: emoji and image picker close on outside click added * style: project setting general page revamp * style: project setting member page revamp * style: project setting features page revamp * style: project setting state page revamp * style: project setting integrations page revamp * style: project setting estimates page revamp * style: project setting automation page revamp * style: project setting label page revamp * chore: member select improvement for member setting page * chore: toggle switch component improvement * style: project automation setting ui improvement * style: module icon added * style: toggle switch improvement * style: ui and spacing consistency * style: project label setting revamp * style: project state setting ui improvement * chore: integration setting repo select validation * chore: code refactor * fix: build fix
44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
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 || ""}`}
|
|
>
|
|
<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-1 bg-custom-background-90"
|
|
}`}
|
|
/>
|
|
</Switch>
|
|
);
|
|
};
|