empty when at end of search

components/more-footer.js

@@ -1,7 +1,7 @@
 import { Button } from 'react-bootstrap'
 import { useState } from 'react'
 
-export default function MoreFooter ({ cursor, fetchMore, Skeleton }) {
+export default function MoreFooter ({ cursor, fetchMore, Skeleton, noMoreText }) {
   const [loading, setLoading] = useState(false)
 
   if (loading) {
@@ -28,7 +28,7 @@ export default function MoreFooter ({ cursor, fetchMore, Skeleton }) {
     )
   } else {
     Footer = () => (
-      <div className='text-muted' style={{ fontFamily: 'lightning', fontSize: '2rem', opacity: '0.6' }}>GENISIS</div>
+      <div className='text-muted' style={{ fontFamily: 'lightning', fontSize: '2rem', opacity: '0.6' }}>{noMoreText || 'GENISIS'}</div>
     )
   }
 

components/search-items.js

@@ -31,6 +31,7 @@ export default function SearchItems ({ variables, items, pins, cursor }) {
       </div>
       <MoreFooter
         cursor={cursor} fetchMore={fetchMore}
+        noMoreText='EMPTY'
         Skeleton={() => <ItemsSkeleton />}
       />
     </>

pages/search.js

@@ -8,6 +8,7 @@ export const getServerSideProps = getGetServerSideProps(ITEM_SEARCH, null, null,
 
 export default function Index ({ data: { search: { items, cursor } } }) {
   const router = useRouter()
+
   return (
     <Layout>
       <SearchItems