added lab search

src/components/input/InputText/index.tsx

@@ -1,4 +1,13 @@
-import React, { ChangeEvent, FC, useCallback, useState } from 'react';
+import React, {
+  ChangeEvent,
+  DetailedHTMLProps,
+  FC,
+  InputHTMLAttributes,
+  ReactElement,
+  ReactNode,
+  useCallback,
+  useState,
+} from 'react';
 
 import classNames from 'classnames';
 
@@ -6,11 +15,21 @@ import { Icon } from '~/components/input/Icon';
 import { InputWrapper } from '~/components/input/InputWrapper';
 import { useTranslatedError } from '~/hooks/data/useTranslatedError';
 import { useFocusEvent } from '~/hooks/dom/useFocusEvent';
-import { IInputTextProps } from '~/types';
 
 import styles from './styles.module.scss';
 
-const InputText: FC<IInputTextProps> = ({
+export type InputTextProps = Omit<
+  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
+  'prefix'
+> & {
+  handler?: (value: string) => void;
+  title?: string;
+  error?: string;
+  suffix?: ReactNode;
+  prefix?: ReactNode;
+};
+
+const InputText: FC<InputTextProps> = ({
   className = '',
   handler,
   required = false,
@@ -43,7 +62,12 @@ const InputText: FC<IInputTextProps> = ({
 
   return (
     <InputWrapper title={title} error={translatedError} focused={focused} notEmpty={!!value}>
-      <div className={classNames(styles.input, { [styles.has_error]: !!error })}>
+      <div
+        className={classNames(styles.input, {
+          [styles.has_error]: !!error,
+          [styles.has_prefix]: prefix,
+        })}
+      >
         {!!prefix && <div className={styles.prefix}>{prefix}</div>}
 
         <input

src/components/input/InputText/styles.module.scss

@@ -9,6 +9,12 @@
     color: $red;
   }
 
+  &.has_prefix {
+    input {
+      padding-left: 0;
+    }
+  }
+
   input {
     height: $input_height;
     border: none;

src/components/input/SearchInput/index.tsx

@@ -0,0 +1,12 @@
+import React, { VFC } from 'react';
+
+import { Icon } from '~/components/input/Icon';
+import { InputText, InputTextProps } from '~/components/input/InputText';
+
+interface SearchInputProps extends Omit<InputTextProps, 'prefix' | 'suffix'> {}
+
+const SearchInput: VFC<SearchInputProps> = ({ ...props }) => (
+  <InputText {...props} prefix={<Icon icon="search" />} />
+);
+
+export { SearchInput };

src/components/lab/LabHead/index.tsx

@@ -1,6 +1,9 @@
 import React, { FC } from 'react';
 
+import { Filler } from '~/components/containers/Filler';
 import { Group } from '~/components/containers/Group';
+import { InputText } from '~/components/input/InputText';
+import { SearchInput } from '~/components/input/SearchInput';
 import { HorizontalMenu } from '~/components/menu/HorizontalMenu';
 import { LabNodesSort } from '~/types/lab';
 import { useLabContext } from '~/utils/context/LabContextProvider';
@@ -12,10 +15,10 @@ interface IProps {
 }
 
 const LabHead: FC<IProps> = ({ isLoading }) => {
-  const { sort, setSort } = useLabContext();
+  const { sort, setSort, search, setSearch } = useLabContext();
 
   return (
-    <Group className={styles.wrap} horizontal>
+    <div className={styles.wrap}>
       <HorizontalMenu>
         <HorizontalMenu.Item
           color="green"
@@ -47,7 +50,13 @@ const LabHead: FC<IProps> = ({ isLoading }) => {
           Важные
         </HorizontalMenu.Item>
       </HorizontalMenu>
-    </Group>
+
+      <Filler />
+
+      <div className={styles.search}>
+        <SearchInput value={search} handler={setSearch} placeholder="Поиск" />
+      </div>
+    </div>
   );
 };
 

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

@@ -2,4 +2,16 @@
 
 .wrap {
   border-radius: $radius;
+  display: flex;
+  flex-direction: row;
+
+  @include tablet {
+    flex-direction: column;
+  }
+}
+
+.search {
+  @include tablet {
+    margin-top: $gap;
+  }
 }

src/components/lab/LabNoResults/index.tsx

@@ -0,0 +1,19 @@
+import React, { VFC } from 'react';
+
+import { Card } from '~/components/containers/Card';
+import { Button } from '~/components/input/Button';
+
+import styles from './styles.module.scss';
+
+interface LabNoResultsProps {
+  resetSearch: () => void;
+}
+
+const LabNoResults: VFC<LabNoResultsProps> = ({ resetSearch }) => (
+  <Card className={styles.wrap}>
+    <div className={styles.title}> Здесь ничего нет</div>
+    <Button onClick={resetSearch}>Сбросить поиск</Button>
+  </Card>
+);
+
+export { LabNoResults };

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

@@ -0,0 +1,16 @@
+@import "src/styles/variables";
+
+.wrap {
+  padding: $gap * 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 33vh;
+}
+
+.title {
+  text-transform: uppercase;
+  font: $font_20_semibold;
+  margin-bottom: $gap * 2;
+}