#23 added lab node layout (sample)

src/components/node/NodePanelInner/styles.module.scss

@@ -31,8 +31,6 @@
 
 .wrap {
   display: flex;
-  align-items: center;
-  justify-content: stretch;
   position: relative;
   width: 100%;
   flex-direction: row;
@@ -88,7 +86,7 @@
   @include tablet {
     white-space: nowrap;
     padding-bottom: 0;
-    font: $font_20_semibold;
+    font: $font_16_semibold;
   }
 }
 

src/components/node/NodePanelLab/index.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import { INode } from '~/redux/types';
+import styles from './styles.module.scss';
+import { URLS } from '~/constants/urls';
+import { Link } from 'react-router-dom';
+
+interface IProps {
+  node: INode;
+}
+
+const NodePanelLab: FC<IProps> = ({ node }) => (
+  <div className={styles.wrap}>
+    <div className={styles.title}>
+      <Link to={URLS.NODE_URL(node.id)}>{node.title || '...'}</Link>
+    </div>
+  </div>
+);
+
+export { NodePanelLab };

src/components/node/NodePanelLab/styles.module.scss

@@ -0,0 +1,24 @@
+@import "~/styles/variables.scss";
+
+.wrap {
+  padding: $gap;
+}
+
+.title {
+  text-transform: uppercase;
+  font: $font_24_semibold;
+  overflow: hidden;
+  flex: 1;
+  text-overflow: ellipsis;
+
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+
+  @include tablet {
+    white-space: nowrap;
+    padding-bottom: 0;
+    font: $font_16_semibold;
+  }
+}