chore: use react-switch for better a11y

1 files changed, 15 insertions, 2 deletions

diff --git a/src/components/StyleGuide.js b/src/components/StyleGuide.js
index 02bff7c..4cb473d 100644
--- a/src/components/StyleGuide.js
+++ b/src/components/StyleGuide.js
@@ -2,9 +2,9 @@ import React, { PureComponent } from 'react';
 
 import { Zap } from 'react-feather';
 
+import SwitchThemed from './SwitchThemed';
 import ToggleSwitch from './ToggleSwitch';
 import Input from './Input';
-import Switch from './Switch';
 import Button from './Button';
 import { LoadingDot } from './shared/Basic';
 
@@ -31,12 +31,25 @@ const Pane = ({ children, style }) => (
   <div style={{ ...paneStyle, ...style }}>{children}</div>
 );
 
+function useToggle(initialState = false) {
+  const [onoff, setonoff] = React.useState(initialState);
+  const handleChange = React.useCallback(() => {
+    setonoff(x => !x);
+  }, []);
+  return [onoff, handleChange];
+}
+
+function SwitchExample() {
+  const [checked, handleChange] = useToggle(false);
+  return <SwitchThemed checked={checked} onChange={handleChange} />;
+}
+
 class StyleGuide extends PureComponent {
   render() {
     return (
       <div>
         <Pane>
-          <Switch />
+          <SwitchExample />
         </Pane>
         <Pane>
           <Input />