File size: 1,554 Bytes
2a7eb2e 4201de5 2a7eb2e 4201de5 2a7eb2e 4201de5 2a7eb2e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
"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 newLogos = await getLogos(page + 1);
setLogos([...logos, ...newLogos.logos]);
setHasMore(newLogos.hasMore);
setPage(page + 1);
};
return (
<InfiniteScroll
scrollableTarget="content-wrapper"
dataLength={logos.length} //This is important field to render the next data
next={fetchMoreData}
hasMore={hasMore}
loader={
<div className="w-full max-lg:col-span-2 text-center">Loading...</div>
}
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>
);
};
|