(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940import * as React from "react";
interface SwitchProps { checked: boolean; onCheckedChange: (checked: boolean) => void; disabled?: boolean; className?: string;}
export function Switch({ checked, onCheckedChange, disabled = false, className = "",}: SwitchProps) { return ( <button type="button" role="switch" aria-checked={checked} disabled={disabled} onClick={() => !disabled && onCheckedChange(!checked)} className={` relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-surface-900 ${checked ? "bg-primary-600" : "bg-surface-300 dark:bg-surface-700"} ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${className} `} > <span className="sr-only">Use setting</span> <span className={` inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${checked ? "translate-x-6" : "translate-x-1"} `} /> </button> );}