+ {/* Controls — heading + search + results-per-page + doc count */}
+
+
{pageTitle}
+
+
+
+ setSearchQuery(e.target.value)}
+ value={searchQuery}
+ autoComplete="off"
+ autoFocus
+ style={{
+ width: '100%',
+ padding: '14px 16px',
+ fontSize: '16px',
+ borderRadius: '8px',
+ border: '2px solid var(--ifm-color-emphasis-300)',
+ marginBottom: '0',
+ transition: 'border-color 0.2s',
+ }}
+ onFocus={(e) => {
+ e.target.style.borderColor = 'var(--ifm-color-primary)';
+ e.target.style.outline = 'none';
+ }}
+ onBlur={(e) => {
+ e.target.style.borderColor = 'var(--ifm-color-emphasis-300)';
+ }}
+ />
+
+
+
+
+ {rppOpen && (
+
+ {[25, 50, 100, 150, 200].map(n => (
+
{ setResultsPerPage(n); setRppOpen(false); }}
+ style={{
+ padding: '8px 16px',
+ fontSize: '15px',
+ cursor: 'pointer',
+ background: n === resultsPerPage ? 'var(--ifm-color-primary)' : 'transparent',
+ color: n === resultsPerPage ? 'white' : 'var(--ifm-font-color-base)',
+ }}
+ onMouseEnter={(e) => {
+ if (n !== resultsPerPage) e.currentTarget.style.background = 'var(--ifm-color-emphasis-100)';
+ }}
+ onMouseLeave={(e) => {
+ if (n !== resultsPerPage) e.currentTarget.style.background = 'transparent';
+ }}
+ >
+ {n}
+
+ ))}
+
+ )}
+
+
+
+ {!!searchResultState.totalResults && (
+
+ {documentsFoundPlural(searchResultState.totalResults)}
+
+ )}
+
{/* closes controls div */}
+
+ {/* Filters sidebar — product filters */}
+
{/* closes filters div */}
+
+ {/* Results area */}
+
+
+ {searchResultState.items.length > 0 ? (
+
+ {(() => {
+ // Group results by product
+ const groupedByProduct = searchResultState.items.reduce((acc, item) => {
+ const product = item.product || 'Unknown';
+ if (!acc[product]) acc[product] = [];
+ acc[product].push(item);
+ return acc;
+ }, {});
+
+ // Sort products alphabetically
+ const sortedProducts = Object.keys(groupedByProduct).sort();
+
+ return sortedProducts.map((product) => {
+ const productResults = groupedByProduct[product];
+
+ return (
+
+
+ {product} ({productResults.length} {productResults.length === 1 ? 'result' : 'results'} on this page)
+
+
+ {productResults.map(({title, url, summary, breadcrumbs}, i) => {
+ return (
+
+
+
+
+
+ {breadcrumbs.length > 0 && (
+
+ )}
+
+ {summary && (
+
+ )}
+
+ );
+ })}
+
+ );
+ });
+ })()}
+
+ ) : (
+ [
+ searchQuery && !searchResultState.loading && (
+
+ No results were found
+
+ ),
+ !!searchResultState.loading && (
+
+ Loading...
+
+ ),
+ ]
+ )}
+
+ {/* Pagination controls */}
+ {searchResultState.items.length > 0 && (
+
+
+
+
+
+ Page
+
+ {
+ const value = e.target.value.replace(/\D/g, '');
+ setPageInputValue(value);
+ }}
+ onFocus={(e) => {
+ setPageInputFocused(true);
+ setPageInputValue(String(searchResultState.lastPage + 1));
+ setTimeout(() => e.target.select(), 0);
+ }}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') {
+ const pageNum = parseInt(pageInputValue, 10);
+ if (pageNum >= 1 && pageNum <= searchResultState.totalPages) {
+ searchResultStateDispatcher({
+ type: 'update',
+ value: {
+ ...searchResultState,
+ lastPage: pageNum - 1,
+ loading: true,
+ }
+ });
+ }
+ setPageInputValue('');
+ setPageInputFocused(false);
+ e.target.blur();
+ } else if (e.key === 'Escape') {
+ setPageInputValue('');
+ setPageInputFocused(false);
+ e.target.blur();
+ }
+ }}
+ onBlur={() => {
+ setPageInputValue('');
+ setPageInputFocused(false);
+ }}
+ style={{
+ width: '60px',
+ padding: '6px 8px',
+ fontSize: '16px',
+ fontWeight: '500',
+ border: '1px solid var(--ifm-color-emphasis-300)',
+ borderRadius: '4px',
+ textAlign: 'center',
+ }}
+ />
+
+ of {searchResultState.totalPages}
+
+
+
+
+
+ )}
+