made arrows and keyboard triggers to move eveything

src/components/node/NodeImageSlideBlock/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo, useState, useEffect, useRef, useCallback } from 'react';
+import React, { FC, useMemo, useState, useEffect, useRef, useCallback, KeyboardEvent } from 'react';
 import { ImageSwitcher } from '../ImageSwitcher';
 import * as styles from './styles.scss';
 import { INode } from '~/redux/types';
@@ -233,6 +233,38 @@ const NodeImageSlideBlock: FC<IProps> = ({
     [wrap]
   );
 
+  const onPrev = useCallback(() => changeCurrent(current > 0 ? current - 1 : images.length - 1), [
+    changeCurrent,
+    current,
+    images,
+  ]);
+
+  const onNext = useCallback(() => changeCurrent(current < images.length - 1 ? current + 1 : 0), [
+    changeCurrent,
+    current,
+    images,
+  ]);
+
+  const onKeyDown = useCallback(
+    event => {
+      if (event.target.tagName && ['TEXTAREA', 'INPUT'].includes(event.target.tagName)) return;
+
+      switch (event.key) {
+        case 'ArrowLeft':
+          return onPrev();
+        case 'ArrowRight':
+          return onNext();
+      }
+    },
+    [onNext, onPrev]
+  );
+
+  useEffect(() => {
+    window.addEventListener('keydown', onKeyDown);
+
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [onKeyDown]);
+
   return (
     <div className={styles.wrap}>
       <div className={classNames(styles.cutter, { [styles.is_loading]: is_loading })} ref={wrap}>
@@ -298,13 +330,17 @@ const NodeImageSlideBlock: FC<IProps> = ({
       */}
       </div>
 
-      <div className={classNames(styles.image_arrow)}>
+      {images.length > 0 && (
+        <div className={classNames(styles.image_arrow)} onClick={onPrev}>
           <Icon icon="left" size={40} />
         </div>
+      )}
 
-      <div className={classNames(styles.image_arrow, styles.image_arrow_right)}>
+      {images.length > 0 && (
+        <div className={classNames(styles.image_arrow, styles.image_arrow_right)} onClick={onNext}>
           <Icon icon="right" size={40} />
         </div>
+      )}
     </div>
   );
 };

src/components/node/NodeImageSlideBlock/styles.scss

@@ -16,6 +16,11 @@
       opacity: 1;
     }
   }
+
+  @include tablet {
+    margin-left: 0;
+    margin-right: 0;
+  }
 }
 
 .image_container {
@@ -61,6 +66,10 @@
   &:global(.is_active) {
     opacity: 1;
   }
+
+  @include tablet {
+    padding: 0;
+  }
 }
 
 .image_count {
@@ -68,10 +77,10 @@
   color: transparentize(white, 0.5);
   bottom: $gap * 3;
   right: 50%;
-  padding: $gap / 2 $gap * 1.2;
+  padding: $gap / 3 $gap;
   border-radius: 20px;
   background: $content_bg;
-  font: $font_14_semibold;
+  font: $font_12_semibold;
   transform: translate(50%, 0);
   display: flex;
   align-items: center;
@@ -80,7 +89,7 @@
 
   small {
     font-size: 0.8em;
-    padding: 0 5px;
+    padding: 0 3px;
   }
 }
 
@@ -95,7 +104,13 @@
   align-items: center;
   justify-content: center;
   transform: translate(-100%, -50%);
-  display: none;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.5s;
+
+  &:hover {
+    opacity: 1;
+  }
 
   &_right {
     right: -$gap;
@@ -103,6 +118,23 @@
     transform: translate(100%, -50%);
   }
 
+  @media (max-width: $content_width + 80px + 40px) {
+    background: $content_bg;
+    left: 0;
+    transform: translate(0, -50%);
+    border-radius: 0 $radius $radius 0;
+
+    &_right {
+      right: 0;
+      left: auto;
+      border-radius: $radius 0 0 $radius;
+    }
+  }
+
+  @include tablet {
+    display: none;
+  }
+
   svg {
     position: relative;
     left: -2px;