wp-optimize / vendor / team-updraft / lib-onboarding-wizard / Wizard / Onboarding / src / components / Fields / SwitchInput.tsx

SwitchInput.tsx in WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance 4.5.4, at vendor/team-updraft/lib-onboarding-wizard/Wizard/Onboarding/src/components/Fields/SwitchInput.tsx

52 lines 1.5 KB

Raw Download Zip

1	import {memo} from "@wordpress/element";
2	import * as Switch from '@radix-ui/react-switch';
3	import { isRTL } from '@wordpress/i18n';
4	// @ts-ignore
5	import Icon from '@/utils/Icon';
6
7
8	interface SwitchInputProps {
9	label: string;
10	value: boolean;
11	id: string;
12	onChange: (value: boolean) => void;
13	required?: boolean;
14	disabled?: boolean;
15	}
16
17	const SwitchInput = ({
18	label,
19	value,
20	id,
21	onChange,
22	disabled
23	}:SwitchInputProps) => {
24
25	const rtl = isRTL();
26
27	const thumbClassRTLPart = rtl
28	? "translate-x-[-15px] data-[state=checked]:translate-x-[0px]"
29	: "translate-x-[0px] data-[state=checked]:translate-x-[15px]";
30
31	return (
32	<Switch.Root
33	className={`w-[35px] h-[19px] px-1 flex flex-row justify-between items-center flex-shrink-0 rounded-full relative data-[state=checked]:bg-[var(--teamupdraft-orange-dark)] bg-gray-500 ${disabled ? "opacity-50" : ""}`}
34	id={id}
35	checked={!!value}
36	aria-label={label}
37	disabled={disabled}
38	onCheckedChange={onChange}
39	>
40	<Switch.Thumb
41	className={`block w-[13px] h-[13px] bg-white rounded-full shadow-lg ring-0 transition-transform duration-200 ease-in-out ${thumbClassRTLPart}`}
42	/>
43	{disabled && (
44	<span className="inset-0 flex items-center justify-center">
45	<Icon name="lock" fill="black" color="black" size={12}/>
46	</span>
47	)}
48	</Switch.Root>
49	);
50	};
51
52	export default memo(SwitchInput);