getting node results for search

src/components/flow/FlowStamp/index.tsx

@@ -0,0 +1,60 @@
+import React, { FC, useCallback, FormEvent } from 'react';
+import { IFlowState } from '~/redux/flow/reducer';
+import { InputText } from '~/components/input/InputText';
+import { FlowRecent } from '../FlowRecent';
+import classnames from 'classnames';
+
+import * as styles from './styles.scss';
+import * as FLOW_ACTIONS from '~/redux/flow/actions';
+import { FlowSearchResults } from '../FlowSearchResults';
+
+interface IProps {
+  recent: IFlowState['recent'];
+  updated: IFlowState['updated'];
+  search: IFlowState['search'];
+  flowChangeSearch: typeof FLOW_ACTIONS.flowChangeSearch;
+}
+
+const FlowStamp: FC<IProps> = ({ recent, updated, search, flowChangeSearch }) => {
+  const onSearchChange = useCallback((text: string) => flowChangeSearch({ text }), [
+    flowChangeSearch,
+  ]);
+
+  const onSearchSubmit = useCallback((event: FormEvent) => {
+    event.preventDefault();
+  }, []);
+
+  return (
+    <div className={styles.wrap}>
+      <form className={styles.search} onSubmit={onSearchSubmit}>
+        <InputText title="Поиск" value={search.text} handler={onSearchChange} />
+      </form>
+
+      <div className={styles.grid}>
+        {search.text ? (
+          <>
+            <div className={styles.label}>
+              <span className={styles.label_text}>Результаты поиска</span>
+            </div>
+
+            <div className={styles.items}>
+              <FlowSearchResults search={search} />
+            </div>
+          </>
+        ) : (
+          <>
+            <div className={styles.label}>
+              <span className={styles.label_text}>Что нового?</span>
+            </div>
+
+            <div className={styles.items}>
+              <FlowRecent updated={updated} recent={recent} />
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export { FlowStamp };

src/components/flow/FlowStamp/styles.scss

@@ -0,0 +1,55 @@
+.wrap {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: $content_bg;
+  border-radius: $radius;
+}
+
+.grid {
+  display: flex;
+  justify-content: stretch;
+  flex-direction: column;
+  flex: 1;
+  border-radius: $radius;
+
+  @include outer_shadow();
+}
+
+.items {
+  padding: 0 $gap 0 $gap;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.label {
+  display: flex;
+  flex-direction: row;
+  min-width: 0;
+  padding: $gap;
+  border-radius: $radius;
+
+  @include title_with_line();
+
+  color: transparentize(white, $amount: 0.8);
+
+  &_search {
+    color: white;
+    padding-left: $gap * 1.2;
+  }
+}
+
+.label_text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.search {
+  background: lighten($content_bg, 4%);
+  border-radius: $radius $radius 0 0;
+  padding: $gap;
+
+  @include outer_shadow();
+}