#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 }) => (
+const BorisSuperpowers: FC<IProps> = ({ active, onChange }) => {
-  <div className={styles.wrap}>
+  const onToggle = useCallback(() => {
-    <div className={styles.toggle}>
+    if (!onChange) {
-      <Toggle value={active} handler={onChange} />
+      return;
-    </div>
+    }
 
-    <div className={styles.left}>
+    onChange(!active);
-      <div className={styles.title}>Суперспособности</div>
+  }, [onChange, active]);
-      {active ? (
+
-        <div className={styles.subtitle}>Включи, чтобы видеть будущее</div>
+  return (
-      ) : (
+    <div className={styles.wrap}>
-        <div className={styles.subtitle}>Ты видишь всё, что скрыто</div>
+      <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 };