return ( <div className="search-summary"> <strong>“{searchTerm}”</strong> Search Results {startResult} - {endResult} of {totalResults} </div> ); };
.result-range, .total-results { font-weight: 500; } interface SearchSummaryProps { searchTerm: string; currentPage: number; resultsPerPage: number; totalResults: number; } const SearchSummary: React.FC<SearchSummaryProps> = ({ searchTerm, currentPage, resultsPerPage, totalResults, }) => { const startResult = (currentPage - 1) * resultsPerPage + 1; const endResult = Math.min(currentPage * resultsPerPage, totalResults); Xxx Search Results 1 - 10 of 51
if (totalResults === 0) { return ( <div className="search-summary"> No results found for <strong>“{searchTerm}”</strong> </div> ); } return ( <
// Usage: // <SearchSummary searchTerm="Xxx" currentPage={1} resultsPerPage={10} totalResults={51} /> function getSearchResultRange(page, perPage, total) { const start = (page - 1) * perPage + 1; const end = Math.min(page * perPage, total); return { start, end, total }; } // Example const { start, end, total } = getSearchResultRange(1, 10, 51); console.log( ${start} - ${end} of ${total} ); // "1 - 10 of 51" 4. Accessibility (ARIA) Enhanced Version <div aria-live="polite" class="search-summary"> <span class="visually-hidden">Search results for</span> <strong>“Xxx”</strong> <span aria-label="results range">1 to 10</span> of 51 </div> .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .total-results { font-weight: 500