added promoted switch button

src/components/editors/EditorPublicSwitch/index.tsx

@@ -0,0 +1,49 @@
+import React, { FC, useCallback, useEffect, useRef } from 'react';
+import styles from './styles.module.scss';
+import { Icon } from '~/components/input/Icon';
+import { IEditorComponentProps } from '~/redux/node/types';
+import classNames from 'classnames';
+import { usePopper } from 'react-popper';
+
+interface IProps extends IEditorComponentProps {}
+
+const EditorPublicSwitch: FC<IProps> = ({ data, setData }) => {
+  const tooltip = useRef<HTMLDivElement>(null);
+  const onChange = useCallback(() => setData({ ...data, is_promoted: !data.is_promoted }), [
+    data,
+    setData,
+  ]);
+
+  const pop = usePopper(tooltip?.current?.parentElement, tooltip.current, {
+    placement: 'bottom',
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 4],
+        },
+      },
+    ],
+  });
+
+  useEffect(() => console.log(pop), [pop]);
+
+  return (
+    <div
+      className={classNames(styles.wrap, { [styles.promoted]: data.is_promoted })}
+      onClick={onChange}
+    >
+      <div className={styles.tooltip} ref={tooltip}>
+        {data.is_promoted
+          ? 'Доступно всем на главной странице'
+          : 'Видно только сотрудникам в лаборатории'}
+      </div>
+
+      <div className={styles.icon}>
+        {data.is_promoted ? <Icon size={24} icon="waves" /> : <Icon size={24} icon="lab" />}
+      </div>
+    </div>
+  );
+};
+
+export { EditorPublicSwitch };

src/components/editors/EditorPublicSwitch/styles.module.scss

@@ -0,0 +1,63 @@
+@import "src/styles/variables";
+
+.wrap {
+  @include outer_shadow();
+  @include editor_round_button();
+
+  transition: all 0.5s;
+  fill: $content_bg;
+  background-color: $olive;
+
+  &.promoted {
+    background-color: lighten($content_bg, 4%);
+    fill: $red;
+  }
+
+  &:hover {
+    opacity: 1;
+
+    .tooltip {
+      opacity: 1;
+    }
+  }
+
+  input {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    z-index: 1;
+    cursor: pointer;
+  }
+}
+
+.icon {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tooltip {
+  border-radius: 2px;
+  background: darken($content_bg, 6%);
+  padding: $gap;
+  position: absolute;
+  font: $font_12_semibold;
+  bottom: 100%;
+  right: 0;
+  transform: translate(0, -$gap);
+  text-align: center;
+  touch-action: none;
+  pointer-events: none;
+  opacity: 0;
+  width: 100px;
+  user-select: none;
+  transition: all 0.1s;
+}