#23 added lab tabs

src/components/lab/LabHead/index.tsx

@@ -1,32 +1,17 @@
 import React, { FC } from 'react';
-import { Group } from '~/components/containers/Group';
-import { Card } from '~/components/containers/Card';
-import { Placeholder } from '~/components/placeholders/Placeholder';
-import { Filler } from '~/components/containers/Filler';
 import styles from './styles.module.scss';
-import { Grid } from '~/components/containers/Grid';
+import { LabHeadItem } from '~/components/lab/LabHeadItem';
 
 interface IProps {}
 
 const LabHead: FC<IProps> = () => (
   <div className={styles.wrap}>
     <div className={styles.group}>
-      <Group horizontal style={{ flex: '0 0 auto' }}>
-        <Placeholder width="32px" height={32} />
-        <Placeholder width="96px" height={18} />
-      </Group>
-
-      <Group horizontal style={{ flex: '0 0 auto' }}>
-        <Placeholder width="32px" height={32} />
-        <Placeholder width="126px" height={18} />
-      </Group>
-
-      <Group horizontal style={{ flex: '0 0 auto' }}>
-        <Placeholder width="32px" height={32} />
-        <Placeholder width="96px" height={18} />
-      </Group>
-
-      <Filler />
+      <LabHeadItem icon="recent" active>
+        Свежие
+      </LabHeadItem>
+      <LabHeadItem icon="hot">Популярные</LabHeadItem>
+      <LabHeadItem icon="star_full">Важные</LabHeadItem>
     </div>
   </div>
 );

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

@@ -5,7 +5,7 @@
 
   border-radius: $radius;
   background-color: $content_bg;
-  padding: $gap;
+  padding: $gap / 2;
 }
 
 .group {
@@ -13,6 +13,8 @@
 
   @include tablet {
     flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
   }
 
   & > * {

src/components/lab/LabHeadItem/index.tsx

@@ -0,0 +1,32 @@
+import React, { FC } from 'react';
+import { Group } from '~/components/containers/Group';
+import { Icon } from '~/components/input/Icon';
+import { Placeholder } from '~/components/placeholders/Placeholder';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+
+interface IProps {
+  icon: string;
+  isLoading?: boolean;
+  active?: boolean;
+}
+
+const LabHeadItem: FC<IProps> = ({ icon, children, isLoading, active }) => {
+  if (isLoading) {
+    return (
+      <Group horizontal className={styles.item}>
+        <Placeholder width="32px" height={32} />
+        <Placeholder width="96px" height={18} />
+      </Group>
+    );
+  }
+
+  return (
+    <Group horizontal className={classNames(styles.item, { [styles.active]: active })}>
+      <Icon icon={icon} size={24} />
+      <span className={styles.text}>{children}</span>
+    </Group>
+  );
+};
+
+export { LabHeadItem };

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

@@ -0,0 +1,26 @@
+@import "~/styles/variables.scss";
+
+.item {
+  flex: 0 0 auto;
+  padding: $gap / 2;
+  fill: currentColor;
+  color: darken(white, 50%);
+  transition: color 0.25s;
+  cursor: pointer;
+
+  &:hover {
+    color: white;
+  }
+
+  &.active {
+    color: $blue;
+
+    &:hover {
+      color: lighten($blue, 4%);
+    }
+  }
+}
+
+.text {
+  font: $font_16_semibold;
+}

src/components/node/NodePanelInner/styles.module.scss

@@ -215,6 +215,7 @@
   transition: fill, stroke 0.25s;
   will-change: transform;
   position: relative;
+  flex: 0 0 32px;
 
   &:global(.is_liked) {
     svg {