From 5843ad6556e55b61fc849b68150cfd2fbccf07fe Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 13 Jan 2024 23:05:43 -0600
Subject: [PATCH] Adjust MoreComponents spacing

---
 src/components/MoreComponents.tsx | 34 +++++++++++++++++--------------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/MoreComponents.tsx b/src/components/MoreComponents.tsx
index fd56f2d8..27b9a51e 100644
--- a/src/components/MoreComponents.tsx
+++ b/src/components/MoreComponents.tsx
@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useRef, useState } from 'react';
 import Spinner from './Spinner';
+import SiteGrid from './SiteGrid';
 
 export default function MoreComponents({
   itemsPerRequest,
@@ -58,22 +59,25 @@ export default function MoreComponents({
     }
   }, [triggerOnView, advance, isLoading]);
 
-  const showMoreButton = itemsTotalCount > itemsPerRequest * offset;
+  const showMoreButton = itemsTotalCount > itemsPerRequest * (offset - 1);
 
-  return <div className="space-y-4">
+  return <>
     {components}
     {showMoreButton &&
-      <button
-        ref={buttonRef}
-        className="block w-full subtle"
-        onClick={!triggerOnView ? advance : undefined}
-        disabled={triggerOnView || isLoading}
-      >
-        {isLoading
-          ? <span className="relative inline-block translate-y-[3px]">
-            <Spinner size={16} />
-          </span>
-          : label}
-      </button>}
-  </div>;
+      <SiteGrid
+        contentMain={
+          <button
+            ref={buttonRef}
+            className="block w-full mt-4 subtle"
+            onClick={!triggerOnView ? advance : undefined}
+            disabled={triggerOnView || isLoading}
+          >
+            {isLoading
+              ? <span className="relative inline-block translate-y-[3px]">
+                <Spinner size={16} />
+              </span>
+              : label}
+          </button>}
+      />}
+  </>;
 }