#23 using custom blocks at lab nodes

src/components/lab/LabText/index.tsx

@@ -0,0 +1,28 @@
+import React, { FC, useCallback, useMemo } from 'react';
+import { Markdown } from '~/components/containers/Markdown';
+import { INodeComponentProps } from '~/redux/node/constants';
+import { formatTextParagraphs } from '~/utils/dom';
+import { path } from 'ramda';
+import styles from './styles.module.scss';
+import { useHistory } from 'react-router';
+import { URLS } from '~/constants/urls';
+
+const LabText: FC<INodeComponentProps> = ({ node }) => {
+  const content = useMemo(() => formatTextParagraphs(path(['blocks', 0, 'text'], node) || ''), [
+    node.blocks,
+  ]);
+
+  const history = useHistory();
+
+  const onClick = useCallback(() => history.push(URLS.NODE_URL(node.id)), [node.id]);
+
+  return (
+    <Markdown
+      dangerouslySetInnerHTML={{ __html: content }}
+      className={styles.wrap}
+      onClick={onClick}
+    />
+  );
+};
+
+export { LabText };

src/components/lab/LabText/styles.module.scss

@@ -0,0 +1,21 @@
+@import "~/styles/variables.scss";
+
+.wrap {
+  padding: 0 $gap;
+
+  @include tablet {
+    position: relative;
+    max-height: 50vh;
+    overflow: hidden;
+
+    &::after {
+      content: ' ';
+      position: absolute;
+      background: linear-gradient(transparentize($content_bg, 1), $content_bg 80%);
+      bottom: 0;
+      left: auto;
+      width: 100%;
+      height: 100px;
+    }
+  }
+}