55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import type React from "react";
|
|
|
|
import { Switch } from "@headlessui/react";
|
|
|
|
export interface ToggleProps {
|
|
checked: boolean;
|
|
label?: string;
|
|
description?: string;
|
|
disabled?: boolean;
|
|
onChange?: (checked: boolean) => void;
|
|
}
|
|
|
|
export const Toggle = ({
|
|
checked,
|
|
label,
|
|
description,
|
|
disabled,
|
|
onChange
|
|
}: ToggleProps): JSX.Element => {
|
|
return (
|
|
<Switch.Group as="div" className="flex items-center justify-between">
|
|
<span className="flex flex-grow flex-col">
|
|
{label && (
|
|
<Switch.Label
|
|
as="span"
|
|
className="text-sm font-medium text-gray-900"
|
|
passive
|
|
>
|
|
{label}
|
|
</Switch.Label>
|
|
)}
|
|
{description && (
|
|
<Switch.Description as="span" className="text-sm text-gray-500">
|
|
{description}
|
|
</Switch.Description>
|
|
)}
|
|
</span>
|
|
<Switch
|
|
checked={checked}
|
|
disabled={disabled}
|
|
onChange={onChange}
|
|
className={`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-orange-500 focus:ring-offset-2 ${
|
|
checked ? "bg-orange-600" : "bg-orange-100"
|
|
} ${disabled ? "cursor-not-allowed bg-orange-400" : ""}`}
|
|
>
|
|
<span
|
|
className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
|
|
checked ? "translate-x-5" : "translate-x-0"
|
|
}`}
|
|
/>
|
|
</Switch>
|
|
</Switch.Group>
|
|
);
|
|
};
|