#23 added labs layout

src/containers/lab/LabGrid/index.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { selectFlowNodes } from '~/redux/flow/selectors';
+import styles from './styles.module.scss';
+import { LabNode } from '~/containers/lab/LabNode';
+
+interface IProps {}
+
+const LabGrid: FC<IProps> = () => {
+  const nodes = useShallowSelect(selectFlowNodes);
+
+  return (
+    <div className={styles.wrap}>
+      {nodes.map(node => (
+        <LabNode node={node} key={node.id} />
+      ))}
+    </div>
+  );
+};
+
+export { LabGrid };

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

@@ -0,0 +1,8 @@
+@import "~/styles/variables.scss";
+
+.wrap {
+  display: grid;
+  grid-auto-flow: row;
+  grid-auto-rows: auto;
+  grid-row-gap: $gap;
+}

src/containers/lab/LabLayout/index.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import { Card } from '~/components/containers/Card';
+import { Sticky } from '~/components/containers/Sticky';
+import { Container } from '~/containers/main/Container';
+import { LabGrid } from '~/containers/lab/LabGrid';
+
+interface IProps {}
+
+const LabLayout: FC<IProps> = () => (
+  <div>
+    <Container>
+      <div className={styles.wrap}>
+        <div className={styles.content}>
+          <LabGrid />
+        </div>
+        <div className={styles.panel}>
+          <Sticky>
+            <Card>Test</Card>
+          </Sticky>
+        </div>
+      </div>
+    </Container>
+  </div>
+);
+
+export { LabLayout };

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

@@ -0,0 +1,11 @@
+@import "~/styles/variables.scss";
+
+.wrap {
+  display: grid;
+  grid-template-columns: 3fr 1fr;
+  column-gap: $gap;
+}
+
+.panel {
+  margin-top: -7px;
+}

src/containers/lab/LabNode/index.tsx

@@ -0,0 +1,34 @@
+import React, { FC } from 'react';
+import { INode } from '~/redux/types';
+import { NodePanelInner } from '~/components/node/NodePanelInner';
+import { useNodeBlocks } from '~/utils/hooks/node/useNodeBlocks';
+
+interface IProps {
+  node: INode;
+}
+
+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}
+      />
+
+      {inline}
+      {block}
+      {head}
+    </div>
+  );
+};
+
+export { LabNode };