#23 lab stats

src/components/lab/LabBanner/index.tsx

@@ -9,12 +9,21 @@ 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" />
+      <div className={styles.title}>Лаборатория!</div>
+
+      <Group className={styles.content}>
+        <p>
+          <strong>
+            Всё, что происходит здесь &mdash; всего лишь эксперимент, о котором не узнает никто за
+            пределами Убежища.
+          </strong>
+        </p>
+
+        <p>
+          Ловим радиоактивных жуков, приручаем утконосов-вампиров, катаемся на младшем научном
+          сотруднике Егоре Порсифоровиче (у него как раз сейчас линька).
+        </p>
+      </Group>
     </Group>
   </Card>
 );

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

@@ -1,5 +1,19 @@
 @import "~/styles/variables.scss";
 
 .wrap {
-  background: $red_gradient_alt;
+  background: linear-gradient(darken($dark_blue, 0%), darken($blue, 30%));
+}
+
+.title {
+  font: $font_24_bold;
+  text-transform: uppercase;
+}
+
+.content {
+  font: $font_14_regular;
+  line-height: 19px;
+
+  strong {
+    font-weight: bold;
+  }
 }

src/components/lab/LabHero/index.tsx

@@ -1,22 +1,51 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback } 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';
+import { INode } from '~/redux/types';
+import { getPrettyDate } from '~/utils/dom';
+import { URLS } from '~/constants/urls';
+import { Link, useHistory } from 'react-router-dom';
 
-interface IProps {}
+interface IProps {
+  node?: Partial<INode>;
+  isLoading?: boolean;
+}
 
-const LabHero: FC<IProps> = () => (
-  <Group horizontal className={styles.wrap1}>
-    <div className={styles.star}>
-      <Icon icon="star_full" size={32} />
-    </div>
+const LabHero: FC<IProps> = ({ node, isLoading }) => {
+  const history = useHistory();
+  const onClick = useCallback(() => {
+    history.push(URLS.NODE_URL(node?.id));
+  }, [history, node]);
 
-    <Group>
-      <Placeholder height={20} />
-      <Placeholder height={12} width="100px" />
+  if (!node || isLoading) {
+    return (
+      <Group horizontal className={styles.wrap1}>
+        <div className={styles.star}>
+          <Icon icon="star_full" size={32} />
+        </div>
+
+        <div className={styles.content}>
+          <Placeholder height={20} />
+          <Placeholder height={12} width="100px" />
+        </div>
+      </Group>
+    );
+  }
+
+  return (
+    <Group horizontal className={styles.wrap} onClick={onClick}>
+      <div className={styles.star}>
+        <Icon icon="star_full" size={32} />
+      </div>
+
+      <div className={styles.content}>
+        <div className={styles.title}>{node.title}</div>
+        <div className={styles.description}>{getPrettyDate(node.created_at)}</div>
+      </div>
     </Group>
-  </Group>
-);
+  );
+};
 
 export { LabHero };

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

@@ -1,10 +1,34 @@
 @import "~/styles/variables.scss";
 
 .wrap {
-  margin-bottom: $gap;
+  min-width: 0;
+  text-decoration: none;
+  cursor: pointer;
 }
 
 .star {
-  fill: #2c2c2c;
+  fill: darken(white, 76%);
+  flex: 0 0 32px;
+}
+
+.title {
+  font: $font_18_semibold;
+  text-overflow: ellipsis;
+  line-height: 22px;
+  word-break: break-all;
+  color: darken(white, 40%);
+
+  @include clamp(2, 22px)
+}
+
+.description {
+  font: $font_10_regular;
+  color: darken(white, 50%);
+  padding-top: 4px;
+}
+
+.content {
+  padding: $gap / 2 0;
+  text-decoration: none;
 }
 

src/components/lab/LabHeroes/index.tsx

@@ -0,0 +1,34 @@
+import React, { FC } from 'react';
+import { INode } from '~/redux/types';
+import styles from '~/containers/lab/LabStats/styles.module.scss';
+import { LabHero } from '~/components/lab/LabHero';
+import { Group } from '~/components/containers/Group';
+
+interface IProps {
+  nodes: Partial<INode>[];
+  isLoading: boolean;
+}
+
+const empty = [...new Array(5)].map((_, i) => i);
+
+const LabHeroes: FC<IProps> = ({ nodes, isLoading }) => {
+  if (isLoading) {
+    return (
+      <Group className={styles.heroes}>
+        {empty.map(i => (
+          <LabHero isLoading key={i} />
+        ))}
+      </Group>
+    );
+  }
+
+  return (
+    <Group className={styles.heroes}>
+      {nodes.slice(0, 7).map(node => (
+        <LabHero node={node} key={node?.id} />
+      ))}
+    </Group>
+  );
+};
+
+export { LabHeroes };

src/components/lab/LabNode/index.tsx

@@ -1,11 +1,7 @@
 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 { LabNodeTitle } from '~/components/lab/LabNodeTitle';
-import { Grid } from '~/components/containers/Grid';
 
 interface IProps {
   node: INode;

src/components/lab/LabTags/index.tsx

@@ -0,0 +1,36 @@
+import React, { FC } from 'react';
+import styles from './/styles.module.scss';
+import { Placeholder } from '~/components/placeholders/Placeholder';
+import { ITag } from '~/redux/types';
+import { Tag } from '~/components/tags/Tag';
+import { Group } from '~/components/containers/Group';
+
+interface IProps {
+  tags: ITag[];
+  isLoading: boolean;
+}
+
+const LabTags: FC<IProps> = ({ tags, isLoading }) => {
+  if (isLoading) {
+    return (
+      <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>
+    );
+  }
+
+  return (
+    <div className={styles.tags}>
+      {tags.slice(0, 10).map(tag => (
+        <Tag tag={tag} key={tag.id} />
+      ))}
+    </div>
+  );
+};
+
+export { LabTags };

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

@@ -0,0 +1,10 @@
+@import "~/styles/variables.scss";
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+
+  & > * {
+    margin: $gap / 2;
+  }
+}