CORE: add tutorial button (#768)

* CORE: add tutorial button

* CORE: fix styles

Author: ekachxaidze98

src/modules/documentation-membership/documentation-membership.jsx

@@ -16,6 +16,8 @@ const DocumentationMembership = ({
   mulltyDocs,
   handleContentOpen,
   videoIcon,
+  tutorialIcon,
+  tutorial,
   redirectLink,
   showNavigator,
   handleScrollToTop,
@@ -40,7 +42,24 @@ const DocumentationMembership = ({
           [styles.innerSpacing]: mulltyDocs,
         })}
       >
-        <div className={styles.docsTitle}>{docsTitle}</div>
+        <div className={styles.headerWrapper}>
+          <div className={styles.docsTitle}>{docsTitle}</div>
+          {/* eslint-disable-next-line max-len */}
+          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+          <div
+            className={styles.videoWrapper}
+            rel="noreferrer"
+            onClick={() =>
+              handleContentOpen({
+                src: tutorial.src,
+                title: tutorial.title,
+              })
+            }
+          >
+            {tutorial.text}
+            <img src={tutorialIcon} alt="video icon" />
+          </div>
+        </div>
         {docs?.map((item, index) => (
           <>
             {item.divider && <div className={styles.divider} />}

src/modules/documentation-membership/styles.css

@@ -270,6 +270,12 @@
   margin: 8px 0;
 }
 
+.header-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .docs-title {
   padding: 0 0 16px;
   font-size: 22px;
@@ -279,6 +285,25 @@
   color: #212121;
 }
 
+.video-wrapper {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 130%;
+  color: #b75400;
+  cursor: pointer;
+  background: #fef5ef;
+  border-radius: 4px;
+  gap: 10px;
+}
+
+.video-wrapper:hover {
+  text-decoration: none;
+}
+
 
 .tutorial-wrapper {
   display: flex;