#23 added lab node layout (sample)

src/containers/lab/LabNode/index.tsx

@@ -2,6 +2,9 @@ import React, { FC } from 'react';
 import { INode } from '~/redux/types';
 import { NodePanelInner } from '~/components/node/NodePanelInner';
 import { useNodeBlocks } from '~/utils/hooks/node/useNodeBlocks';
+import styles from './styles.module.scss';
+import { Card } from '~/components/containers/Card';
+import { NodePanelLab } from '~/components/node/NodePanelLab';
 
 interface IProps {
   node: INode;
@@ -10,24 +13,18 @@ interface IProps {
 const LabNode: FC<IProps> = ({ node }) => {
   const { inline, block, head } = useNodeBlocks(node, false);
 
-  return (
-    <div>
-      <NodePanelInner
-        node={node}
-        canEdit
-        canLike
-        canStar
-        isLoading={false}
-        onEdit={console.log}
-        onLike={console.log}
-        onStar={console.log}
-        onLock={console.log}
-      />
+  console.log(node.id, { inline, block, head });
+
+  return (
+    <Card seamless className={styles.wrap}>
+      <div className={styles.head}>
+        <NodePanelLab node={node} />
+      </div>
 
-      {inline}
-      {block}
       {head}
-    </div>
+      {block}
+      {inline}
+    </Card>
   );
 };
 

src/containers/lab/LabNode/styles.module.scss

@@ -0,0 +1,10 @@
+@import "~/styles/variables.scss";
+
+.wrap {
+  min-width: 0;
+}
+
+.head {
+  background-color: transparentize(black, 0.9);
+  border-radius: $radius $radius 0 0;
+}