33 lines
979 B
TypeScript
33 lines
979 B
TypeScript
|
type AdvancedToggleProps = {
|
||
|
|
advancedToggle: boolean;
|
||
|
|
onAdvancedChange: (advancedToggle: boolean) => void;
|
||
|
|
};
|
||
|
|
|
||
|
|
const AdvancedToggle = ({
|
||
|
|
advancedToggle,
|
||
|
|
onAdvancedChange,
|
||
|
|
}: AdvancedToggleProps) => {
|
||
|
|
return (
|
||
|
|
<div className="mx-auto">
|
||
|
|
<label className="flex flex-row space-x-2">
|
||
|
|
<span>Advanced Settings</span>
|
||
|
|
<input
|
||
|
|
name="advancedSettings"
|
||
|
|
type="checkbox"
|
||
|
|
id="advancedSettings"
|
||
|
|
className="sr-only peer"
|
||
|
|
value=""
|
||
|
|
/>
|
||
|
|
<div
|
||
|
|
className="relative w-10 h-5 rounded-full bg-gray-300 transition peer-checked:bg-blue-500 after:content-['']
|
||
|
|
after:absolute after:top-0.5 after:left-0.5 after:w-4 after:h-4 after:rounded-full after:bg-white after:shadow after:transition
|
||
|
|
after:duration-300 peer-checked:after:translate-x-5"
|
||
|
|
onClick={() => onAdvancedChange(!advancedToggle)}
|
||
|
|
></div>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default AdvancedToggle;
|