(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1import * as React from "react";
2
3interface SwitchProps {
4 checked: boolean;
5 onCheckedChange: (checked: boolean) => void;
6 disabled?: boolean;
7 className?: string;
8}
9
10export function Switch({
11 checked,
12 onCheckedChange,
13 disabled = false,
14 className = "",
15}: SwitchProps) {
16 return (
17 <button
18 type="button"
19 role="switch"
20 aria-checked={checked}
21 disabled={disabled}
22 onClick={() => !disabled && onCheckedChange(!checked)}
23 className={`
24 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
25 ${checked ? "bg-primary-600" : "bg-surface-300 dark:bg-surface-700"}
26 ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
27 ${className}
28 `}
29 >
30 <span className="sr-only">Use setting</span>
31 <span
32 className={`
33 inline-block h-4 w-4 transform rounded-full bg-white transition-transform
34 ${checked ? "translate-x-6" : "translate-x-1"}
35 `}
36 />
37 </button>
38 );
39}