#23 added superpowers switch

src/components/input/Toggle/index.tsx

@@ -0,0 +1,28 @@
+import React, { FC, useCallback } from 'react';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+
+interface IProps {
+  value?: boolean;
+  handler?: (val: boolean) => void;
+}
+
+const Toggle: FC<IProps> = ({ value, handler }) => {
+  const onClick = useCallback(() => {
+    if (!handler) {
+      return;
+    }
+
+    handler(!value);
+  }, [value, handler]);
+
+  return (
+    <button
+      type="button"
+      className={classNames(styles.toggle, { [styles.active]: value })}
+      onClick={onClick}
+    />
+  );
+};
+
+export { Toggle };

src/components/input/Toggle/styles.module.scss

@@ -0,0 +1,35 @@
+@import "~/styles/variables.scss";
+
+.toggle {
+  height: 24px;
+  width: 48px;
+  border-radius: 12px;
+  background-color: transparentize(white, 0.9);
+  display: flex;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  position: relative;
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    left: 3px;
+    top: 3px;
+    height: 18px;
+    width: 18px;
+    border-radius: 11px;
+    background-color: darken(white, 50%);
+    transform: translate(0, 0);
+    transition: transform 0.25s, color 0.25s, background-color;
+  }
+
+  &.active {
+    background-color: $wisegreen;
+
+    &::after {
+      transform: translate(24px, 0);
+      background-color: white;
+    }
+  }
+}