#23 added superpowers switch

src/components/boris/BorisSuperpowers/index.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import { Toggle } from '~/components/input/Toggle';
+
+interface IProps {
+  active?: boolean;
+  onChange?: (val: boolean) => void;
+}
+
+const BorisSuperpowers: FC<IProps> = ({ active, onChange }) => (
+  <div className={styles.wrap}>
+    <div className={styles.toggle}>
+      <Toggle value={active} handler={onChange} />
+    </div>
+
+    <div className={styles.left}>
+      <div className={styles.title}>Суперспособности</div>
+      {active ? (
+        <div className={styles.subtitle}>Включи, чтобы видеть будущее</div>
+      ) : (
+        <div className={styles.subtitle}>Ты видишь всё, что скрыто</div>
+      )}
+    </div>
+  </div>
+);
+
+export { BorisSuperpowers };

src/components/boris/BorisSuperpowers/styles.module.scss

@@ -0,0 +1,19 @@
+@import "~/styles/variables";
+
+.wrap {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: $gap;
+  align-items: center;
+}
+
+.title {
+  font: $font_14_semibold;
+  color: white;
+  text-transform: uppercase;
+}
+
+.subtitle {
+  font: $font_12_regular;
+  color: transparentize(white, 0.5);
+}