add in search bar suggest

ui/shared/ad/CoinzillaTextAd.tsx

@@ -10,10 +10,20 @@ type AdData = {
     thumbnail: string;
     url: string;
     cta_button: string;
-    impressionUrl: string;
+    impressionUrl?: string;
   };
 }
 
+// const MOCK: AdData = {
+//   ad: {
+//     url: 'https://unsplash.com/s/photos/cute-kitten',
+//     thumbnail: 'https://placekitten.com/40/40',
+//     name: 'All about kitties',
+//     description_short: 'To see millions picture of cute kitties',
+//     cta_button: 'click here',
+//   },
+// };
+
 const CoinzillaTextAd = ({ className }: {className?: string}) => {
   const [ adData, setAdData ] = React.useState<AdData | null>(null);
   useEffect(() => {

ui/snippets/searchBar/SearchBarSuggest.tsx

-import { Text } from '@chakra-ui/react';
+import { Text, useColorModeValue } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
 import type { SearchResult } from 'types/api/search';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
+import TextAd from 'ui/shared/ad/TextAd';
 import ContentLoader from 'ui/shared/ContentLoader';
 
 import SearchBarSuggestItem from './SearchBarSuggestItem';
@@ -35,8 +36,14 @@ const SearchBarSuggest = ({ query, searchTerm }: Props) => {
       </>
     );
   })();
+  const dividerColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
 
-  return content;
+  return (
+    <>
+      { !isMobile && <TextAd pb={ 4 } mb={ 5 } borderColor={ dividerColor } borderBottomWidth="1px"/> }
+      { content }
+    </>
+  );
 };
 
 export default SearchBarSuggest;