#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/styles.module.scss

@@ -8,3 +8,4 @@
   background-color: transparentize(black, 0.9);
   border-radius: $radius $radius 0 0;
 }
+

src/containers/lab/LabGrid/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
 import styles from './styles.module.scss';
-import { LabNode } from '~/containers/lab/LabNode';
+import { LabNode } from '~/components/lab/LabNode';
 import { selectLabListNodes } from '~/redux/lab/selectors';
 
 interface IProps {}

src/containers/lab/LabLayout/index.tsx

@@ -6,6 +6,11 @@ import { Container } from '~/containers/main/Container';
 import { LabGrid } from '~/containers/lab/LabGrid';
 import { useDispatch } from 'react-redux';
 import { labGetList } from '~/redux/lab/actions';
+import { Placeholder } from '~/components/placeholders/Placeholder';
+import { Grid } from '~/components/containers/Grid';
+import { Group } from '~/components/containers/Group';
+import { LabHero } from '~/components/lab/LabHero';
+import { LabBanner } from '~/components/lab/LabBanner';
 
 interface IProps {}
 
@@ -25,7 +30,54 @@ const LabLayout: FC<IProps> = () => {
           </div>
           <div className={styles.panel}>
             <Sticky>
-              <Card>Test</Card>
+              <Group>
+                <LabBanner />
+
+                <Card>
+                  <Group>
+                    <Placeholder height={32} width="100%" />
+
+                    <div />
+
+                    <Placeholder height={14} width="100px" />
+
+                    <div />
+
+                    <div className={styles.tags}>
+                      <Placeholder height={20} width="100px" />
+                      <Placeholder height={20} width="64px" />
+                      <Placeholder height={20} width="100%" />
+                      <Placeholder height={20} width="100px" />
+                      <Placeholder height={20} width="100px" />
+                      <Placeholder height={20} width="64px" />
+                    </div>
+
+                    <div />
+
+                    <Placeholder height={14} width="180px" />
+
+                    <div />
+
+                    <Group className={styles.heroes}>
+                      <LabHero />
+                      <div />
+                      <LabHero />
+                      <div />
+                      <LabHero />
+                      <div />
+                      <LabHero />
+                      <div />
+                      <LabHero />
+                      <div />
+                      <LabHero />
+                      <div />
+                      <LabHero />
+                    </Group>
+
+                    <div />
+                  </Group>
+                </Card>
+              </Group>
             </Sticky>
           </div>
         </div>

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

@@ -9,3 +9,12 @@
 .panel {
   margin-top: -7px;
 }
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+
+  & > * {
+    margin: 0 $gap $gap 0;
+  }
+}