Pagination Search

npm install @fbin-web/neighborhood-core

import { NbhdPaginationSearch } from '@fbin-web/neighborhood-core';

<nbhd-pagination-search
  selected-sort="relevance"
  heading="Search Results for"
  search-term="faucet"
  current-page="1"
  total-pages="10"
  total-results="75"
  max-visible-pages="3"
  surface="secondary">
</nbhd-pagination-search>

<script>
  const paginationSearch = document.querySelector('nbhd-pagination-search');

  paginationSearch.sortOptions = [
    { name: 'Relevance', value: 'relevance' },
    { name: 'Price: Low to High', value: 'price-asc' },
    { name: 'Price: High to Low', value: 'price-desc' },
    { name: 'Newest', value: 'newest' },
  ];
</script>

npm install @fbin-web/neighborhood-react

import { NbhdPaginationSearch } from '@fbin-web/neighborhood-react';

import { NbhdPaginationSearch } from '@fbin-web/neighborhood-react';

const sortOptions = [
  { name: 'Relevance', value: 'relevance' },
  { name: 'Price: Low to High', value: 'price-asc' },
  { name: 'Price: High to Low', value: 'price-desc' },
  { name: 'Newest', value: 'newest' },
];

const App = () => (
  <>
    <NbhdPaginationSearch
      selectedSort="relevance"
      heading="Search Results for"
      searchTerm="faucet"
      currentPage={1}
      totalPages={10}
      totalResults={75}
      maxVisiblePages={3}
      sortOptions={sortOptions}
      surface="secondary"></NbhdPaginationSearch>
  </>
);