Add toggle button to disable / enable dynamic update

src/Components/ToggleButton/ToggleButton.tsx

@@ -0,0 +1,52 @@
+import React, { FC } from 'react';
+import './ToggleButton.scss';
+
+interface IToggleButtonProps {
+  id: string
+  text: string
+  type?: TOGGLE_TYPE
+  title: string
+  checked: boolean
+  onChange: React.ChangeEventHandler<HTMLInputElement>
+}
+
+export enum TOGGLE_TYPE {
+  MATERIAL,
+  IOS
+}
+
+export const ToggleButton: FC<IToggleButtonProps> = (props) => {
+  const id = `toggle-${props.id}`;
+  const type = props.type ?? TOGGLE_TYPE.MATERIAL;
+  let classLine = 'line w-10 h-4 bg-gray-400 rounded-full shadow-inner';
+  let classDot = 'dot absolute w-6 h-6 bg-white rounded-full shadow -left-1 -top-1 transition';
+  if (type === TOGGLE_TYPE.IOS) {
+    classLine = 'line block bg-gray-600 w-14 h-8 rounded-full';
+    classDot = 'dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition';
+  }
+
+  return (
+    <div title={props.title}>
+      <div className="flex items-center justify-center w-full mb-12">
+        <label
+          htmlFor={id}
+          className="flex items-center cursor-pointer"
+        >
+          <div className="relative">
+            <input
+              id={id}
+              type="checkbox"
+              onChange={props.onChange}
+              checked={props.checked}
+              className="sr-only" />
+            <div className={classLine}></div>
+            <div className={classDot}></div>
+          </div>
+          <div className="ml-3 text-gray-700 font-medium">
+            { props.text }
+          </div>
+        </label>
+      </div>
+    </div>
+  );
+};