#23 made sample lab layout

src/components/lab/LabBanner/index.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import { Card } from '~/components/containers/Card';
+import { Placeholder } from '~/components/placeholders/Placeholder';
+import { Group } from '~/components/containers/Group';
+
+interface IProps {}
+
+const LabBanner: FC<IProps> = () => (
+  <Card className={styles.wrap}>
+    <Group>
+      <Placeholder height={32} />
+      <Placeholder height={18} width="120px" />
+      <Placeholder height={18} width="200px" />
+      <Placeholder height={18} width="60px" />
+      <Placeholder height={18} width="180px" />
+      <Placeholder height={18} width="230px" />
+    </Group>
+  </Card>
+);
+
+export { LabBanner };

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

@@ -0,0 +1,5 @@
+@import "~/styles/variables.scss";
+
+.wrap {
+  background: $red_gradient_alt;
+}

src/components/lab/LabHero/index.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+import { Placeholder } from '~/components/placeholders/Placeholder';
+import { Group } from '~/components/containers/Group';
+import { Icon } from '~/components/input/Icon';
+import styles from './styles.module.scss';
+
+interface IProps {}
+
+const LabHero: FC<IProps> = () => (
+  <Group horizontal className={styles.wrap1}>
+    <div className={styles.star}>
+      <Icon icon="star_full" size={32} />
+    </div>
+
+    <Group>
+      <Placeholder height={20} />
+      <Placeholder height={12} width="100px" />
+    </Group>
+  </Group>
+);
+
+export { LabHero };

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

@@ -0,0 +1,10 @@
+@import "~/styles/variables.scss";
+
+.wrap {
+  margin-bottom: $gap;
+}
+
+.star {
+  fill: #2c2c2c;
+}
+

src/components/lab/LabNode/index.tsx

@@ -0,0 +1,31 @@
+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;
+}
+
+const LabNode: FC<IProps> = ({ node }) => {
+  const { inline, block, head } = useNodeBlocks(node, false);
+
+  console.log(node.id, { inline, block, head });
+
+  return (
+    <Card seamless className={styles.wrap}>
+      <div className={styles.head}>
+        <NodePanelLab node={node} />
+      </div>
+
+      {head}
+      {block}
+      {inline}
+    </Card>
+  );
+};
+
+export { LabNode };

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

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