diff --git a/src/DocSearchModal.tsx b/src/DocSearchModal.tsx index d88fdef6..7d82560f 100644 --- a/src/DocSearchModal.tsx +++ b/src/DocSearchModal.tsx @@ -3,7 +3,7 @@ import { createAutocomplete, AutocompleteState, } from '@francoischalifour/autocomplete-core'; -import { getAlgoliaHits } from '@francoischalifour/autocomplete-preset-algolia'; +import { getAlgoliaResults } from '@francoischalifour/autocomplete-preset-algolia'; import { MAX_QUERY_SIZE } from './constants'; import { @@ -35,6 +35,7 @@ export function DocSearchModal({ onClose = noop, transformItems = (x) => x, hitComponent = Hit, + resultsFooterComponent = () => null, navigator, }: DocSearchModalProps) { const [state, setState] = React.useState< @@ -144,7 +145,7 @@ export function DocSearchModal({ ]; } - return getAlgoliaHits({ + return getAlgoliaResults({ searchClient, queries: [ { @@ -193,7 +194,9 @@ export function DocSearchModal({ throw error; }) - .then((hits: DocSearchHit[]) => { + .then((results) => { + const hits: DocSearchHit[] = results[0].hits; + const nbHits: number = results[0].nbHits; const sources = groupBy(hits, (hit) => hit.hierarchy.lvl0); // We store the `lvl0`s to display them as search suggestions @@ -207,6 +210,8 @@ export function DocSearchModal({ }); } + setContext({ nbHits }); + return Object.values(sources).map((items) => { return { onSelect({ suggestion }) { @@ -339,6 +344,7 @@ export function DocSearchModal({ {...autocomplete} state={state} hitComponent={hitComponent} + resultsFooterComponent={resultsFooterComponent} recentSearches={recentSearches} favoriteSearches={favoriteSearches} onItemClick={(item) => { diff --git a/src/ResultsScreen.tsx b/src/ResultsScreen.tsx index ce2ac88c..45ff2047 100644 --- a/src/ResultsScreen.tsx +++ b/src/ResultsScreen.tsx @@ -16,6 +16,9 @@ interface ResultsScreenProps React.KeyboardEvent > { state: AutocompleteState; + resultsFooterComponent(props: { + state: AutocompleteState; + }): JSX.Element; onItemClick(item: InternalDocSearchHit): void; } @@ -69,6 +72,10 @@ export function ResultsScreen(props: ResultsScreenProps) { /> ); })} + +
+ +
); } diff --git a/src/style.css b/src/style.css index 4eaa08d3..00e8a8f9 100644 --- a/src/style.css +++ b/src/style.css @@ -412,6 +412,19 @@ html[data-theme='dark'] { color: var(--docsearch-highlight-color); } +.DocSearch-HitsFooter { + margin-bottom: var(--docsearch-spacing); + padding: var(--docsearch-spacing); + color: var(--docsearch-muted-color); + display: flex; + justify-content: center; +} + +.DocSearch-HitsFooter a { + color: inherit; + border-bottom: 1px solid; +} + .DocSearch-Hit { display: flex; position: relative;