#23 made clickable superpower captions

src/components/boris/BorisSuperpowers/index.tsx

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