feat: begin adding pagination to catalogue

src/components/GuidedInstallTileMostPopular.js

@@ -67,7 +67,7 @@ const GuidedInstallTileMostPopular = () => {
           min-width: 250px;
         }
 
-        background: #1a3c34;
+        background: var(--button-background-color);
 
         h2,
         p {

src/components/QuickstartGrid.jsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/react';
+import { Button, Surface } from '@newrelic/gatsby-theme-newrelic';
+import QuickstartTile from '@components/QuickstartTile';
+import { quickstart } from '../types';
+
+const QuickstartGrid = ({ quickstarts }) => {
+  const [displayed, showMore] = usePagination(quickstarts, 11);
+
+  return (
+    <>
+      {displayed.map((q) => (
+        <QuickstartTile key={q.id} {...q} />
+      ))}
+      {quickstarts.length > displayed.length && (
+        <Surface
+          base={Surface.BASE.PRIMARY}
+          interactive
+          css={css`
+            border: 1px solid #e4e5e6;
+            box-shadow: none;
+            display: flex;
+          `}
+        >
+          <Button
+            variant={Button.VARIANT.NORMAL}
+            css={css`
+              border-radius: 8px;
+              font-size: 1rem;
+              width: 100%;
+            `}
+            onClick={showMore}
+          >
+            Show more
+          </Button>
+        </Surface>
+      )}
+    </>
+  );
+};
+
+const usePagination = (quickstarts, size) => {
+  const [numDisplayed, setNumDisplayed] = useState(size);
+  const [qs, setQs] = useState(quickstarts.slice(0, size));
+
+  useEffect(() => {
+    setQs(quickstarts.slice(0, numDisplayed));
+  }, [numDisplayed, quickstarts]);
+
+  const showMore = () => {
+    setNumDisplayed(numDisplayed + size + 1);
+  };
+
+  return [qs, showMore];
+};
+
+QuickstartGrid.propTypes = {
+  quickstarts: PropTypes.arrayOf(quickstart),
+};
+
+export default QuickstartGrid;

src/pages/index.jsx

@@ -30,6 +30,7 @@ import QuickstartTile from '@components/QuickstartTile';
 import SuperTiles from '@components/SuperTiles';
 import CategoryList from '@components/indexComponents/CategoryList';
 import CategoryDropdown from '@components/indexComponents/CategoryDropdown';
+import QuickstartGrid from '@components/QuickstartGrid';
 
 const COLUMN_BREAKPOINT = '1131px';
 // used to set the height of the Spinner to reduce layout shift on page load
@@ -56,7 +57,7 @@ const QuickstartsPage = ({ data, location }) => {
   const [loadComplete, setLoadComplete] = useState(false);
 
   useEffect(() => {
-      setLoadComplete(true);
+    setLoadComplete(true);
   }, []);
 
   const handleScroll = () => {
@@ -188,7 +189,7 @@ const QuickstartsPage = ({ data, location }) => {
             padding: 1.5rem;
           `}
         >
-          <CategoryDropdown 
+          <CategoryDropdown
             category={category}
             categoriesWithCount={categoriesWithCount}
             handleParam={handleParam}
@@ -228,7 +229,7 @@ const QuickstartsPage = ({ data, location }) => {
                     `}
                   >
                     {!loadComplete && <Spinner />}
-                    { loadComplete &&
+                    {loadComplete && (
                       <Slider
                         {...indexSettings}
                         css={css`
@@ -244,7 +245,7 @@ const QuickstartsPage = ({ data, location }) => {
                           />
                         ))}
                       </Slider>
-                    }
+                    )}
                   </div>
                 </>
               )}
@@ -278,7 +279,7 @@ const QuickstartsPage = ({ data, location }) => {
                 `}
               >
                 {!loadComplete && <Spinner />}
-                { loadComplete &&
+                {loadComplete && (
                   <Slider {...indexSettings}>
                     {featuredQuickstarts.map((pack) => (
                       <QuickstartTile
@@ -288,7 +289,7 @@ const QuickstartsPage = ({ data, location }) => {
                       />
                     ))}
                   </Slider>
-                }
+                )}
               </div>
             </>
           )}
@@ -355,9 +356,7 @@ const QuickstartsPage = ({ data, location }) => {
             `}
           >
             {Boolean(search) && <SuperTiles />}
-            {filteredQuickstarts.map((pack) => (
-              <QuickstartTile key={pack.id} featured={false} {...pack} />
-            ))}
+            <QuickstartGrid quickstarts={filteredQuickstarts} />
           </div>
         </div>
       </div>