Spaces:
Runtime error
Runtime error
File size: 2,809 Bytes
4f2c36e 5240c42 848e268 4f2c36e 8660004 cca515d 5240c42 4f2c36e 5881efa 81969cf 4f2c36e 5881efa 4f2c36e cca515d 81969cf 848e268 5881efa 4f2c36e cca515d 4f2c36e 5240c42 848e268 0891679 848e268 0891679 53353f2 0891679 5240c42 53353f2 5240c42 848e268 5240c42 4f2c36e |
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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
import classNames from "classnames";
import { createBreakpoint } from "react-use";
import { AnimatePresence } from "framer-motion";
import InfiniteScroll from "react-infinite-scroller";
import { Image } from "@/utils/type";
import { useCollections } from "@/components/main/hooks/useCollections";
import { Modal } from "@/components/modal/modal";
import { Collection } from "./collection";
import { CollectionLoading } from "./loading";
import { useCollection } from "@/components/modal/useCollection";
const useBreakpoint = createBreakpoint({ XL: 1280, L: 1024, S: 768, XS: 640 });
export const Collections: React.FC<{ category: string }> = ({ category }) => {
const { open, setOpen } = useCollection();
const { images, loading, infiniteRefetch, pagination, infiniteLoading } =
useCollections(category);
const breakpoint = useBreakpoint();
if (loading) return null;
return (
<>
<InfiniteScroll
pageStart={0}
loadMore={() => {
if (infiniteLoading) return;
infiniteRefetch();
}}
hasMore={pagination?.total_pages > pagination?.page}
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"
>
{images?.map((collection: Image, i: number) =>
collection?.loading ? (
<CollectionLoading
key={"loading" + i}
prompt={collection.prompt}
error={collection.error}
className={classNames("", {
"!translate-y-12":
breakpoint === "XL"
? i % 5 === 1 || i % 5 === 3
: breakpoint === "L"
? i % 4 === 1 || i % 4 === 3
: breakpoint === "S"
? i % 3 === 1
: breakpoint === "XS"
? false
: false,
})}
/>
) : (
<Collection
key={category + collection.id}
index={i}
collection={collection}
className={classNames("", {
"!translate-y-12":
breakpoint === "XL"
? i % 5 === 1 || i % 5 === 3
: breakpoint === "L"
? i % 4 === 1 || i % 4 === 3
: breakpoint === "S"
? i % 3 === 1
: breakpoint === "XS"
? false
: false,
})}
onOpen={setOpen}
/>
)
)}
</InfiniteScroll>
<AnimatePresence initial={false} mode="wait" onExitComplete={() => null}>
{open !== null && <Modal id={open} onClose={() => setOpen(null)} />}
</AnimatePresence>
</>
);
};
|