docs(headless commerce react samples): add products per page (#4275)

https://coveord.atlassian.net/browse/KIT-3436

packages/samples/headless-commerce-react/src/components/products-per-page/products-per-page.tsx

@@ -0,0 +1,47 @@
+import {Pagination} from '@coveo/headless/commerce';
+import {useEffect, useState} from 'react';
+
+interface IProductsPerPageProps {
+  controller: Pagination;
+}
+
+export default function ProductsPerPage(props: IProductsPerPageProps) {
+  const {controller} = props;
+
+  const [state, setState] = useState(controller.state);
+
+  useEffect(() => {
+    controller.subscribe(() => setState(controller.state));
+  }, [controller]);
+
+  const options = [5, 10, 20, 50];
+  return (
+    <div className="ProductsPerPage">
+      <label className="ProductsPerPageLabel">Products per page:</label>
+      {options.map((pageSize) => (
+        <label key={pageSize} className="ProductsPerPageOption">
+          <input
+            type="radio"
+            name="page"
+            value={pageSize}
+            checked={state.pageSize === pageSize}
+            onChange={() => controller.setPageSize(pageSize)}
+          />
+          {pageSize}
+        </label>
+      ))}
+      <label key={0} className="ProductsPerPageOptionOther">
+        <input
+          type="radio"
+          name="page"
+          value={state.pageSize}
+          checked={state.pageSize === 0 || !options.includes(state.pageSize)}
+          onChange={() => controller.setPageSize(0)}
+        />
+        {state.pageSize !== 0 && !options.includes(state.pageSize)
+          ? `Other (${state.pageSize})`
+          : 'Default'}
+      </label>
+    </div>
+  );
+}

packages/samples/headless-commerce-react/src/components/use-cases/search-and-listing-interface/search-and-listing-interface.css

@@ -1,7 +1,16 @@
 .column {
   float: left;
+}
+
+.small {
+  width: 25%;
+}
+.medium {
   width: 50%;
 }
+.large {
+  width: 75%;
+}
 
 .row:after {
   content: '';

packages/samples/headless-commerce-react/src/components/use-cases/search-and-listing-interface/search-and-listing-interface.tsx

@@ -7,6 +7,7 @@ import {useState, useEffect} from 'react';
 import BreadcrumbManager from '../../breadcrumb-manager/breadcrumb-manager';
 import FacetGenerator from '../../facets/facet-generator/facet-generator';
 import ProductList from '../../product-list/product-list';
+import ProductsPerPage from '../../products-per-page/products-per-page';
 import ShowMore from '../../show-more/show-more';
 import Sort from '../../sort/sort';
 import Summary from '../../summary/summary';
@@ -37,23 +38,27 @@ export default function SearchAndListingInterface(
 
   return (
     <div className="SearchAndListingInterface row">
-      <div className="column">
+      <div className="row">
+        <Sort controller={searchOrListingController.sort()} />
+        <Summary controller={searchOrListingController.summary()} />
+      </div>
+      <div className="column small">
         <FacetGenerator
           controller={searchOrListingController.facetGenerator()}
         />
       </div>
-      <div className="column">
+      <div className="column medium">
         <BreadcrumbManager
           controller={searchOrListingController.breadcrumbManager()}
         />
-        <Sort controller={searchOrListingController.sort()} />
-        <Summary controller={searchOrListingController.summary()} />
+
         <ProductList
           products={searchOrListingState.products}
           controllerBuilder={searchOrListingController.interactiveProduct}
           cartController={cartController}
           navigate={navigate}
         ></ProductList>
+        <ProductsPerPage controller={searchOrListingController.pagination()} />
         <ShowMore controller={searchOrListingController.pagination()} />
         {/*<Pagination controller={controller.pagination()} />*/}
       </div>