#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' }}>
+      <LabHeadItem icon="recent" active>
-        <Placeholder width="32px" height={32} />
+        Свежие
-        <Placeholder width="96px" height={18} />
+      </LabHeadItem>
-      </Group>
+      <LabHeadItem icon="hot">Популярные</LabHeadItem>
-
+      <LabHeadItem icon="star_full">Важные</LabHeadItem>
-      <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 />
     </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 {

src/sprites/Sprites.tsx

@@ -283,6 +283,22 @@ const Sprites: FC<{}> = () => (
         transform="scale(0.011) translate(120, 120)"
       />
     </g>
+
+    <g id="recent">
+      <path fill="none" d="M0 0h24v24H0V0z" stroke="none" />
+      <path
+        stroke="none"
+        d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"
+      />
+    </g>
+
+    <g id="hot">
+      <path fill="none" d="M0 0h24v24H0V0z" stroke="none" />
+      <path
+        stroke="none"
+        d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"
+      />
+    </g>
   </svg>
 );