remove search provider

Author: avivkeller

apps/site/components/Common/Searchbox/InnerModal/index.module.css

@@ -1,34 +1,51 @@
 'use client';
 
 import SearchInput from '@node-core/ui-components/Common/Search/Input';
+import SearchResults from '@node-core/ui-components/Common/Search/Results';
 import { useTranslations } from 'next-intl';
 import type { ComponentProps, FC } from 'react';
 
 import { DEFAULT_ORAMA_QUERY_PARAMS } from '#site/next.constants.mjs';
-import { useSearchbox } from '#site/providers/searchboxProvider';
 
 import { Footer } from '../Footer';
-import { SearchResultsWrapper } from '../SearchResults';
 import styles from './index.module.css';
+import type { Document } from '../DocumentLink';
+import { SearchItem } from '../SearchItem';
 
-type SearchProps = ComponentProps<typeof SearchInput>;
+type SearchProps = {
+  mode: 'search' | 'chat';
+  onChat: () => void;
+} & ComponentProps<typeof SearchInput>;
 
-export const Search: FC<SearchProps> = props => {
-  const searchbox = useSearchbox();
+export const Search: FC<SearchProps> = ({ mode, onChat, ...props }) => {
   const t = useTranslations();
 
   return (
     <div className={styles.searchContainer}>
       <SearchInput
         ariaLabel={t('components.search.searchPlaceholder')}
         placeholder={t('components.search.searchPlaceholder')}
-        tabIndex={searchbox?.mode === 'search' ? 0 : -1}
-        aria-hidden={searchbox?.mode === 'chat'}
+        tabIndex={mode === 'search' ? 0 : -1}
+        aria-hidden={mode === 'chat'}
         {...props}
         searchParams={DEFAULT_ORAMA_QUERY_PARAMS}
       />
-
-      <SearchResultsWrapper />
+      <SearchResults
+        suggestions={[
+          t('components.search.suggestionOne'),
+          t('components.search.suggestionTwo'),
+          t('components.search.suggestionThree'),
+        ]}
+        suggestionsTitle={t('components.search.suggestions')}
+        noResultsTitle={t('components.search.noResultsFoundFor')}
+        searchParams={DEFAULT_ORAMA_QUERY_PARAMS}
+        onChat={onChat}
+        chatLabel={t('components.search.chatButtonLabel')}
+        tabIndex={mode === 'search' ? 0 : -1}
+        aria-hidden={mode === 'chat'}
+      >
+        {hit => <SearchItem document={hit.document as Document} mode={mode} />}
+      </SearchResults>
       <Footer />
     </div>
   );

apps/site/components/Common/Searchbox/InnerModal/index.tsx

@@ -2,25 +2,28 @@
 
 import SearchModal from '@node-core/ui-components/Common/Search/Modal';
 import { useTranslations } from 'next-intl';
-import type { FC } from 'react';
+import { useRef, useState, type FC } from 'react';
 
-import { SearchboxProvider } from '#site/providers/searchboxProvider';
-
-import InnerModal from './InnerModal';
 import { oramaClient } from './orama-client';
+import { Search } from './Search';
+import { SlidingChatPanel } from './SlidingChatPanel';
 
 const Searchbox: FC = () => {
   const t = useTranslations();
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const [mode, setMode] = useState<'chat' | 'search'>('search');
 
   return (
-    <SearchboxProvider>
-      <SearchModal
-        client={oramaClient}
-        placeholder={t('components.search.searchPlaceholder')}
-      >
-        <InnerModal />
-      </SearchModal>
-    </SearchboxProvider>
+    <SearchModal
+      client={oramaClient}
+      placeholder={t('components.search.searchPlaceholder')}
+    >
+      <Search ref={searchInputRef} mode={mode} onChat={() => setMode('chat')} />
+      <SlidingChatPanel
+        open={mode === 'chat'}
+        onClose={() => setMode('search')}
+      />
+    </SearchModal>
   );
 };
 

apps/site/components/Common/Searchbox/Search/index.tsx

@@ -16,4 +16,3 @@ export * from './download';
 export * from './userAgent';
 export * from './vulnerabilities';
 export * from './page';
-export * from './searchbox';

apps/site/components/Common/Searchbox/SearchResults.tsx

@@ -63,11 +63,11 @@
   @apply mb-4
     flex
     items-center
+    justify-center
     gap-2
     overflow-x-auto
     px-1
-    text-sm
-    lg:justify-center;
+    text-sm;
 
   &::-webkit-scrollbar {
     @apply hidden;