#23 lab stats

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;
 }