clearing search

src/components/flow/FlowSearchResults/index.tsx

@@ -1,11 +1,9 @@
-import React, { FC, useCallback, MouseEvent } from 'react';
+import React, { FC, useCallback } from 'react';
 import styles from './styles.scss';
 import { IFlowState } from '~/redux/flow/reducer';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
-import { URLS, PRESETS } from '~/constants/urls';
-import { Link } from 'react-router-dom';
-import classNames from 'classnames';
-import { getURL, getPrettyDate } from '~/utils/dom';
+import { FlowRecentItem } from '../FlowRecentItem';
+import { Icon } from '~/components/input/Icon';
 
 interface IProps {
   search: IFlowState['search'];
@@ -33,22 +31,19 @@ const FlowSearchResults: FC<IProps> = ({ search, onLoadMore }) => {
     );
   }
 
+  if (!search.results.length) {
+    return (
+      <div className={styles.loading}>
+        <Icon size={96} icon="search" />
+        <div className={styles.nothing}>Ничего не найдено</div>
+      </div>
+    );
+  }
+
   return (
     <div className={styles.wrap} onScroll={onScroll}>
       {search.results.map(node => (
-        <Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
-          <div
-            className={classNames(styles.thumb)}
-            style={{
-              backgroundImage: `url("${getURL({ url: node.thumbnail }, PRESETS.avatar)}")`,
-            }}
-          />
-
-          <div className={styles.info}>
-            <div className={styles.title}>{node.title}</div>
-            <div className={styles.comment}>{getPrettyDate(node.created_at)}</div>
-          </div>
-        </Link>
+        <FlowRecentItem node={node} key={node.id} />
       ))}
     </div>
   );

src/components/flow/FlowSearchResults/styles.scss

@@ -7,64 +7,20 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
   flex: 1;
   opacity: 0.3;
+  fill: transparentize(white, 0.7);
+  stroke: none;
 }
 
-.item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font: $font_12_regular;
-  border-radius: $radius;
-  flex-direction: row;
-  margin-bottom: $gap;
+.nothing {
   color: white;
-  text-decoration: none;
-}
-
-.thumb {
-  height: 48px;
-  margin-right: $gap;
-  background: 50% 50% no-repeat;
-  background-size: cover;
-  border-radius: $radius;
-  flex: 0 0 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-
-  &.new {
-    &::after {
-      content: ' ';
-      width: 12px;
-      height: 12px;
-      border-radius: 100%;
-      background: $red;
-      box-shadow: $content_bg 0 0 0 5px;
-      position: absolute;
-      right: -2px;
-      bottom: -2px;
-    }
-  }
-}
-
-.info {
-  flex: 1;
-  min-width: 0;
-}
-
-.title {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  font: $font_16_semibold;
-  text-transform: capitalize;
-}
-
-.comment {
-  font: $font_12_regular;
-  margin-top: 4px;
-  opacity: 0.5;
+  text-transform: uppercase;
+  font: $font_18_semibold;
+  font-weight: 900;
+  opacity: 0.3;
+  padding: 10px 20px;
+  text-align: center;
+  line-height: 1.5em;
 }