added lab sorting

src/components/lab/LabHead/index.tsx

@@ -1,6 +1,8 @@
 import React, { FC } from 'react';
 
 import { LabHeadItem } from '~/components/lab/LabHeadItem';
+import { LabNodesSort } from '~/types/lab';
+import { useLabContext } from '~/utils/context/LabContextProvider';
 
 import styles from './styles.module.scss';
 
@@ -9,20 +11,28 @@ interface IProps {
 }
 
 const LabHead: FC<IProps> = ({ isLoading }) => {
+  const { sort, setSort } = useLabContext();
+
   return (
     <div className={styles.wrap}>
       <div className={styles.group}>
-        <LabHeadItem icon="recent" active isLoading={isLoading}>
+        <LabHeadItem
+          icon="recent"
+          active={sort === LabNodesSort.New}
+          isLoading={isLoading}
+          onClick={() => setSort(LabNodesSort.New)}
+        >
           Свежие
         </LabHeadItem>
 
-        <LabHeadItem icon="hot" isLoading={isLoading}>
+        <LabHeadItem
+          icon="hot"
+          active={sort === LabNodesSort.Hot}
+          isLoading={isLoading}
+          onClick={() => setSort(LabNodesSort.Hot)}
+        >
           Популярные
         </LabHeadItem>
-
-        <LabHeadItem icon="star_full" isLoading={isLoading}>
-          Важные
-        </LabHeadItem>
       </div>
     </div>
   );

src/components/lab/LabHeadItem/index.tsx

@@ -12,12 +12,13 @@ interface IProps {
   icon: string;
   isLoading?: boolean;
   active?: boolean;
+  onClick?: () => void;
 }
 
-const LabHeadItem: FC<IProps> = ({ icon, children, isLoading, active }) => {
+const LabHeadItem: FC<IProps> = ({ icon, children, isLoading, active, onClick }) => {
   if (isLoading) {
     return (
-      <Group horizontal className={styles.item}>
+      <Group horizontal className={styles.item} key="loading">
         <Placeholder width="32px" height={32} />
         <Placeholder width="96px" height={18} />
       </Group>
@@ -25,7 +26,11 @@ const LabHeadItem: FC<IProps> = ({ icon, children, isLoading, active }) => {
   }
 
   return (
-    <Group horizontal className={classNames(styles.item, { [styles.active]: active })}>
+    <Group
+      horizontal
+      className={classNames(styles.item, { [styles.active]: active })}
+      onClick={onClick}
+    >
       <Icon icon={icon} size={24} />
       <span className={styles.text}>{children}</span>
     </Group>