add pagination page + display model name

app/_actions/logos.ts

@@ -2,7 +2,7 @@
 
 import prisma from "@/_utils/prisma";
 
-export const getLogos = async () => {
+export const getLastLogos = async () => {
   const images = await prisma.logo.findMany({
     select: {
       id: true,
@@ -14,3 +14,26 @@ export const getLogos = async () => {
   });
   return images.map((image) => image.id);
 };
+
+const ITEMS_PER_PAGE = 24;
+
+export const getLogos = async (page: number = 0) => {
+  const images = await prisma.logo.findMany({
+    select: {
+      id: true,
+    },
+    skip: page * ITEMS_PER_PAGE,
+    take: ITEMS_PER_PAGE,
+    orderBy: {
+      id: "desc",
+    },
+  });
+
+  const total = await prisma.logo.count();
+  const hasMore = total > (page + 1) * ITEMS_PER_PAGE;
+
+  return {
+    logos: images.map((image) => image.id),
+    hasMore,
+  };
+};

app/_components/gallery/index.tsx

@@ -1,3 +1,5 @@
+import Image from "next/image";
+
 export const Gallery = ({ logos }: { logos: Array<number> }) => {
   return (
     <section id="gallery" className="w-full py-10 lg:py-16">
@@ -10,10 +12,12 @@ export const Gallery = ({ logos }: { logos: Array<number> }) => {
       </h3>
       <div className="max-lg:grid max-lg:grid-cols-2 lg:flex lg:items-start lg:justify-center gap-6 flex-wrap">
         {logos.map((index) => (
-          <img
+          <Image
             key={index}
             src={`/api/images/${index}`}
             alt="Generated logo"
+            width={500}
+            height={500}
             className="rounded-2xl w-full lg:size-72 object-cover"
           />
         ))}

app/_components/gallery/list.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import InfiniteScroll from "react-infinite-scroll-component";
+import Image from "next/image";
+import { useState } from "react";
+import { getLogos } from "@/app/_actions/logos";
+
+export const InfiniteGallery = ({
+  logos: initialLogos,
+  hasMore: initialHasMore,
+}: {
+  logos: Array<number>;
+  hasMore: boolean;
+}) => {
+  const [page, setPage] = useState(0);
+  const [logos, setLogos] = useState([...initialLogos]);
+  const [hasMore, setHasMore] = useState(initialHasMore);
+
+  const fetchMoreData = async () => {
+    const logos = await getLogos(page + 1);
+    setLogos([...logos.logos]);
+    setHasMore(logos.hasMore);
+    setPage(page + 1);
+  };
+
+  return (
+    <InfiniteScroll
+      dataLength={logos.length} //This is important field to render the next data
+      next={fetchMoreData}
+      hasMore={hasMore}
+      loader={<h4>Loading...</h4>}
+      className="max-lg:grid max-lg:grid-cols-2 lg:flex lg:items-start lg:justify-center gap-6 flex-wrap"
+      endMessage={
+        <div className="w-full max-lg:col-span-2 text-zinc-400 text-center">
+          Yay! You have seen it all
+        </div>
+      }
+    >
+      {logos.map((index) => (
+        <Image
+          key={index}
+          src={`/api/images/${index}`}
+          alt="Generated logo"
+          width={500}
+          height={500}
+          className="rounded-2xl w-full lg:size-72 object-cover"
+        />
+      ))}
+    </InfiniteScroll>
+  );
+};

app/_components/generation/index.tsx

@@ -11,6 +11,7 @@ import { Industry } from "./step/industry";
 import { Description } from "./step/description";
 import classNames from "classnames";
 import { toast } from "react-toastify";
+import Image from "next/image";
 
 export const Generation = () => {
   const [form, setForm] = useState<Form>({
@@ -63,10 +64,12 @@ export const Generation = () => {
         </div>
         {result && (
           <div className="lg:col-span-3 flex items-center justify-center rounded-3xl">
-            <img
+            <Image
               src={`/api/images/${result}`}
               alt="Generated logo"
               className="h-[300px]"
+              width={400}
+              height={400}
             />
           </div>
         )}

app/gallery/page.tsx

@@ -0,0 +1,19 @@
+import { InfiniteGallery } from "@/app/_components/gallery/list";
+import { getLogos } from "@/app/_actions/logos";
+
+async function lastLogos() {
+  const logos = await getLogos();
+  return logos;
+}
+export const revalidate = 0;
+
+export default async function Gallery() {
+  const { hasMore, logos } = await lastLogos();
+  return (
+    <section className="w-full py-10 lg:py-16">
+      <div className="max-lg:grid max-lg:grid-cols-2 lg:flex lg:items-start lg:justify-center gap-6 flex-wrap">
+        <InfiniteGallery logos={logos} hasMore={hasMore} />
+      </div>
+    </section>
+  );
+}

app/layout.tsx

@@ -56,6 +56,24 @@ export default function RootLayout({
         <div className="h-screen w-full overflow-auto font-[family-name:var(--font-nohemi-sans)] p-6 scroll-smooth">
           <Navigation />
           {children}
+          <footer className="mt-4 w-full max-w-4xl mx-auto border-t border-zinc-800 pt-8 pb-3 text-center">
+            <p className="text-sm text-zinc-400">
+              Powered by{" "}
+              <a
+                href="https://github.com/huggingface/huggingface.js"
+                className="font-mono text-amber-500 hover:text-amber-400"
+              >
+                huggingface.js
+              </a>{" "}
+              and{" "}
+              <a
+                href="https://huggingface.co/Shakker-Labs/FLUX.1-dev-LoRA-Logo-Design"
+                className="font-mono text-zinc-100 hover:text-white"
+              >
+                Shakker-Labs/FLUX.1-dev-LoRA-Logo-Design
+              </a>
+            </p>
+          </footer>
         </div>
         <ToastContainer />
       </body>

app/page.tsx

@@ -1,10 +1,10 @@
-import { getLogos } from "./_actions/logos";
+import { getLastLogos } from "./_actions/logos";
 import { Gallery } from "./_components/gallery";
 import { Generation } from "./_components/generation";
 import { HeroHeader } from "./_components/hero-header";
 
 async function lastLogos() {
-  const logos = await getLogos();
+  const logos = await getLastLogos();
   return logos;
 }
 export const revalidate = 0;

components/_navigation/index.tsx

@@ -2,10 +2,11 @@ import Image from "next/image";
 
 import Arrow from "@/assets/svg/arrow.svg";
 import Logo from "@/assets/logo.png";
+import Link from "next/link";
 
 export const Navigation = () => {
   return (
-    <div className="rounded-full bg-zinc-950 border border-white/10 px-6 py-2.5 lg:py-4 flex items-center justify-center lg:justify-between max-w-max lg:max-w-xl lg:w-full mx-auto shadow-md relative">
+    <div className="rounded-full bg-zinc-950 border border-white/10 px-6 py-2.5 lg:pr-7 lg:py-4 flex items-center justify-center lg:justify-between max-w-max lg:max-w-xl lg:w-full mx-auto shadow-md relative">
       <div className="flex items-center justify-center gap-3 relative">
         <div className="relative">
           <Image src={Logo} alt="logo" className="size-6" />
@@ -20,7 +21,11 @@ export const Navigation = () => {
         </div>
         <p className="font-semibold text-lg text-white">LogoAI</p>
       </div>
-      <ul className="hidden lg:flex items-center justify-right gap-3 text-white"></ul>
+      <ul className="hidden lg:flex items-center justify-right gap-3">
+        <li className="text-zinc-400 hover:text-white">
+          <Link href="/gallery">Gallery</Link>
+        </li>
+      </ul>
     </div>
   );
 };

package-lock.json

@@ -16,6 +16,7 @@
         "react": "^18",
         "react-dom": "^18",
         "react-icons": "^5.3.0",
+        "react-infinite-scroll-component": "^6.1.0",
         "react-toastify": "^10.0.5",
         "react-use": "^17.5.1"
       },
@@ -4497,6 +4498,25 @@
         "react": "*"
       }
     },
+    "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": {
+        "throttle-debounce": "^2.1.0"
+      },
+      "peerDependencies": {
+        "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",

package.json

@@ -17,6 +17,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.3.0",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-toastify": "^10.0.5",
     "react-use": "^17.5.1"
   },