import React from 'react' import GridWrapper from '../Grid/GridWrapper' import GridItem from '../Grid/GridItem' import SearchResultItem from './SearchResultItem' import MainHeading from '../Titles/MainHeading' import Pagination from '../Search/Pagination' import NoResultsFound from '../Search/NoResultsFound' const SearchResults = ({ searchResults, searchParams, onSearchSubmitted }) => { const numberOfKits = searchResults.meta.total_items const numberOfTemplates = searchResults.meta.total_template_count if (numberOfKits === 0) { return <NoResultsFound /> } // Just checking if we have a search string to show the appropriate sub title string // if there is no search 1 will be the length as it returns page numbers as a key const isSearching = Object.keys(searchParams).length > 1 const subTitle = `${isSearching ? 'Search results:' : 'Browse our collection of'} ${numberOfKits} Template Kit${numberOfKits > 1 ? 's' : ''} including ${numberOfTemplates} Free Individual Templates` return ( <> <MainHeading title='Free Template Kits' subtitle={subTitle} /> <GridWrapper includeLastItemSpacer> { searchResults.items.map(item => ( <GridItem colWidthPercentage={33} key={item.ID}> <SearchResultItem item={item} /> </GridItem> )) } </GridWrapper> <Pagination currentPage={searchResults.meta.current_page} totalHits={numberOfKits} perPage={searchResults.meta.per_page} searchParams={searchParams} onSearchSubmitted={onSearchSubmitted} /> </> ) } export default SearchResults