added search by trending searches on click"

src/entities/trendingSearchesChips/index.tsx

@@ -1,20 +1,27 @@
 import React from 'react';
 
 import Chip from '@shared/ui/chip';
-
 import { getColor } from './lib/colors';
 
 import { Base } from './ui/styled';
 
 type Props = {
   searches: string[];
+  onClick: (searchValue: string) => void;
 };
 
-const TrendingSearchesChips = ({ searches }: Props) => {
+const TrendingSearchesChips = ({ searches, onClick }: Props) => {
+  const handleChipClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    const target = e.target as HTMLElement;
+    const textToSearch = target.innerText.replaceAll('#', '');
+
+    onClick(textToSearch);
+  };
+
   return (
     <Base>
-      {searches.map((search, index) => (
-        <Chip key={index} text={`#${search}`} color={getColor()} />
+      {searches.map(search => (
+        <Chip key={search} text={`#${search}`} color={getColor()} onClick={handleChipClick} />
       ))}
     </Base>
   );

src/features/searchGifs/ui/styled.ts

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 
 export const Wrapper = styled.div`
-  padding: 5em;
+  padding: 0 5em 5em 5em;
   display: flex;
   height: 100%;
   flex-direction: column;

src/features/trendingSearches/index.tsx

@@ -2,10 +2,12 @@ import React, { useEffect } from 'react';
 import { useStore } from 'effector-react';
 
 import { $trendingSearches, getTrendingSearchesFx } from './model';
+// TODO: probably not good thing to import from one feature to another?
+import { searchGifsFx } from '../searchGifs/model';
 
 import TrendingSearchesChips from '@entities/trendingSearchesChips';
 
-import { Base } from './ui/styled';
+import { Base, Heading } from './ui/styled';
 
 const TrendingSearches = () => {
   const trendingSearchesList = useStore($trendingSearches);
@@ -14,9 +16,16 @@ const TrendingSearches = () => {
     getTrendingSearchesFx();
   }, []);
 
+  const handleTrendingClick = (searchValue: string) => {
+    searchGifsFx({ query: searchValue });
+  };
+
   return (
     <Base>
-      {trendingSearchesList.length && <TrendingSearchesChips searches={trendingSearchesList} />}
+      <Heading>Trending right now</Heading>
+      {trendingSearchesList.length && (
+        <TrendingSearchesChips searches={trendingSearchesList} onClick={handleTrendingClick} />
+      )}
     </Base>
   );
 };

src/features/trendingSearches/ui/styled.ts

@@ -1,3 +1,7 @@
 import styled from 'styled-components';
 
 export const Base = styled.div``;
+
+export const Heading = styled.h5`
+  text-align: center;
+`;

src/pages/main/ui/styled.ts

@@ -2,5 +2,5 @@ import styled from 'styled-components';
 
 export const Base = styled.div`
   display: flex;
-  padding: 1em;
+  padding: 5em 1em 1em 1em;
 `;