fixup!

Author: avivkeller

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

@@ -1,24 +1,51 @@
 'use client';
 
+import Search from '@node-core/ui-components/Common/Search';
 import SearchModal from '@node-core/ui-components/Common/Search/Modal';
 import { useTranslations } from 'next-intl';
-import { useRef, useState, type FC } from 'react';
+import { useState, type FC } from 'react';
 
+import { DEFAULT_ORAMA_QUERY_PARAMS } from '#site/next.constants.mjs';
+
+import type { Document } from './DocumentLink';
+import { Footer } from './Footer';
 import { oramaClient } from './orama-client';
-import { Search } from './Search';
+import { SearchItem } from './SearchItem';
 import { SlidingChatPanel } from './SlidingChatPanel';
 
 const Searchbox: FC = () => {
   const t = useTranslations();
-  const searchInputRef = useRef<HTMLInputElement>(null);
   const [mode, setMode] = useState<'chat' | 'search'>('search');
 
   return (
     <SearchModal
       client={oramaClient}
       placeholder={t('components.search.searchPlaceholder')}
     >
-      <Search ref={searchInputRef} mode={mode} onChat={() => setMode('chat')} />
+      <Search
+        input={{
+          placeholder: t('components.search.searchPlaceholder'),
+          ariaLabel: t('components.search.searchPlaceholder'),
+        }}
+        results={{
+          suggestions: [
+            t('components.search.suggestionOne'),
+            t('components.search.suggestionTwo'),
+            t('components.search.suggestionThree'),
+          ],
+          suggestionsTitle: t('components.search.suggestions'),
+          noResultsTitle: t('components.search.noResultsFoundFor'),
+          chatLabel: t('components.search.chatButtonLabel'),
+          onChat: () => setMode('chat'),
+          onHit: hit => (
+            <SearchItem document={hit.document as Document} mode={mode} />
+          ),
+        }}
+        tabIndex={mode === 'search' ? 0 : -1}
+        aria-hidden={mode === 'chat'}
+        searchParams={DEFAULT_ORAMA_QUERY_PARAMS}
+      />
+      <Footer />
       <SlidingChatPanel
         open={mode === 'chat'}
         onClose={() => setMode('search')}

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

@@ -12,17 +12,17 @@ import SearchResultsSkeleton from './Skeleton';
 import Tabs from './Tabs';
 
 type SearchResultsWrapperProps = {
-  chatLabel: string;
+  chatLabel?: string;
   onChat: () => void;
   searchParams: Omit<ComponentProps<typeof Tabs>['searchParams'], 'term'>;
-  children: ComponentProps<typeof SearchResults.GroupList>['children'];
+  onHit: ComponentProps<typeof SearchResults.GroupList>['children'];
 } & ComponentProps<typeof SearchResultsEmpty>;
 
 const SearchResultsWrapper: FC<SearchResultsWrapperProps> = ({
   onChat,
   chatLabel,
   searchParams,
-  children,
+  onHit,
   suggestionsTitle,
   suggestions,
   noResultsTitle,
@@ -41,9 +41,9 @@ const SearchResultsWrapper: FC<SearchResultsWrapperProps> = ({
             className={classNames(styles.chatButton, {
               [styles.chatButtonWithSearch]: searchTerm,
             })}
-            {...props}
             initialPrompt={searchTerm || undefined}
             data-focus-on-arrow-nav
+            {...props}
           >
             <SparklesIcon />
             <span>
@@ -58,10 +58,7 @@ const SearchResultsWrapper: FC<SearchResultsWrapperProps> = ({
         <SearchResults.Wrapper>
           <Tabs
             {...props}
-            searchParams={{
-              ...searchParams,
-              term: searchTerm ?? '',
-            }}
+            searchParams={{ ...searchParams, term: searchTerm ?? '' }}
             selectedFacet={selectedFacet}
           />
           <SearchResultsSkeleton />
@@ -80,7 +77,7 @@ const SearchResultsWrapper: FC<SearchResultsWrapperProps> = ({
               <div key={group.name} className={styles.searchResultsGroup}>
                 <h2 className={styles.searchResultsGroupTitle}>{group.name}</h2>
                 <SearchResults.GroupList group={group}>
-                  {children}
+                  {onHit}
                 </SearchResults.GroupList>
               </div>
             )}

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

@@ -0,0 +1,22 @@
+import type { ComponentProps, FC } from 'react';
+
+import SearchInput from '@node-core/ui-components/Common/Search/Input';
+import SearchResults from '@node-core/ui-components/Common/Search/Results';
+
+type SearchProps = {
+  input: Partial<ComponentProps<typeof SearchInput>>;
+  results: Partial<ComponentProps<typeof SearchResults>>;
+} & Omit<Partial<ComponentProps<typeof SearchInput>>, 'results'> &
+  Omit<Partial<ComponentProps<typeof SearchResults>>, 'results'>;
+
+const Search: FC<SearchProps> = ({ input, results, ...props }) => (
+  <>
+    <SearchInput {...input} {...props} />
+    <SearchResults
+      {...(results as ComponentProps<typeof SearchResults>)}
+      {...props}
+    />
+  </>
+);
+
+export default Search;