change scroll component

app/page.tsx

@@ -5,7 +5,7 @@ import NoSSR from "@/components/no-ssr";
 
 export default function Home() {
   return (
-    <div id="content" className="pb-32 h-screem overflow-auto">
+    <div id="content" className="pb-32 h-screen overflow-auto">
       <Header />
       <NoSSR>
         <Main />

assets/globals.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 body, html {
-  @apply bg-black h-screen;
+  @apply bg-black overflow-hidden;
 }
 
 .loading-dots {

components/main/collections/index.tsx

@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import { createBreakpoint } from "react-use";
 import { AnimatePresence } from "framer-motion";
-import InfiniteScroll from "react-infinite-scroller";
+import InfiniteScroll from "react-infinite-scroll-component";
 
 import { Image } from "@/utils/type";
 import { useCollections } from "@/components/main/hooks/useCollections";
@@ -23,13 +23,16 @@ export const Collections: React.FC<{ category: string }> = ({ category }) => {
   return (
     <>
       <InfiniteScroll
-        pageStart={0}
-        loadMore={() => {
+        dataLength={pagination?.total}
+        next={() => {
           if (infiniteLoading) return;
           infiniteRefetch();
         }}
         hasMore={pagination?.total_pages > pagination?.page}
+        loader={<div />}
+        scrollableTarget="content"
         className="mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5 mt-8 lg:mt-14"
+        style={{ overflow: "initial" }}
       >
         {images?.map((collection: Image, i: number) =>
           collection?.loading ? (

components/main/index.tsx

@@ -40,7 +40,7 @@ export const Main = () => {
 
   return (
     <main className="px-6 z-[2] relative max-w-[1722px] mx-auto">
-      <div className="py-2 pl-2 pr-2 lg:pr-4 bg-black bg-opacity-30 backdrop-blur-sm lg:sticky lg:top-4 z-10 rounded-full">
+      <div className="bg-black bg-opacity-30 backdrop-blur-sm lg:sticky lg:top-4 z-10 rounded-full p-2 lg:py-2 lg:pl-2 lg:pr-3">
         <div className="flex flex-col lg:flex-row items-center justify-between w-full">
           <InputGeneration />
           <div className="items-center justify-center flex-col lg:flex-row lg:justify-end gap-5 w-full mt-6 lg:mt-0 flex">
@@ -74,7 +74,7 @@ export const Main = () => {
       </div>
       <div
         className={classNames(
-          "flex items-center justify-center lg:justify-end text-right gap-1 mt-4 lg:mt-0 pr-2 lg:pr-4",
+          "flex items-center justify-center lg:justify-end text-right gap-1 mt-4 lg:mt-0",
           {
             "text-gray-300 text-sm": !user?.sub,
             "text-white text-sm": user?.sub,

package-lock.json

@@ -19,7 +19,7 @@
         "react": "^18",
         "react-dom": "^18",
         "react-icons": "^4.11.0",
-        "react-infinite-scroller": "^1.2.6",
+        "react-infinite-scroll-component": "^6.1.0",
         "react-use": "^17.4.0"
       },
       "devDependencies": {
@@ -3317,6 +3317,7 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3743,6 +3744,7 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -3809,21 +3811,30 @@
         "react": "*"
       }
     },
-    "node_modules/react-infinite-scroller": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/react-infinite-scroller/-/react-infinite-scroller-1.2.6.tgz",
-      "integrity": "sha512-mGdMyOD00YArJ1S1F3TVU9y4fGSfVVl6p5gh/Vt4u99CJOptfVu/q5V/Wlle72TMgYlBwIhbxK5wF0C/R33PXQ==",
+    "node_modules/react-infinite-scroll-component": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz",
+      "integrity": "sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==",
       "dependencies": {
-        "prop-types": "^15.5.8"
+        "throttle-debounce": "^2.1.0"
       },
       "peerDependencies": {
-        "react": "^0.14.9 || ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+        "react": ">=16.0.0"
+      }
+    },
+    "node_modules/react-infinite-scroll-component/node_modules/throttle-debounce": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
+      "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==",
+      "engines": {
+        "node": ">=8"
       }
     },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true
     },
     "node_modules/react-universal-interface": {
       "version": "0.6.2",

package.json

@@ -20,7 +20,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^4.11.0",
-    "react-infinite-scroller": "^1.2.6",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-use": "^17.4.0"
   },
   "devDependencies": {

prisma/schema.prisma

@@ -4,7 +4,7 @@ generator client {
 
 datasource db {
   provider = "sqlite"
-  url      = "file://data/dev.db"
+  url      = "file:../data/dev.db"
 }
 
 model Collection {