Spaces:
Runtime error
Runtime error
File size: 2,556 Bytes
81969cf 4f2c36e 5240c42 4f2c36e 5240c42 cca515d 5240c42 4f2c36e 5881efa 81969cf 4f2c36e 5881efa 4f2c36e cca515d 81969cf cca515d 5881efa 4f2c36e cca515d 4f2c36e 5240c42 0891679 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 |
import { useState } from "react";
import classNames from "classnames";
import { createBreakpoint } from "react-use";
import { AnimatePresence } from "framer-motion";
import { Collection as CollectionType } 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 { collections, loading } = useCollections(category);
const breakpoint = useBreakpoint();
if (loading) return null;
return (
<>
<div className="mx-auto grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5 mt-8 lg:mt-14">
{collections?.map((collection: CollectionType, i: number) =>
collection?.loading ? (
<CollectionLoading
key={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"
? i % 2 === 1
: 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"
? i % 2 === 1
: false,
})}
onOpen={setOpen}
/>
)
)}
</div>
<AnimatePresence initial={false} mode="wait" onExitComplete={() => null}>
{open !== null && <Modal id={open} onClose={() => setOpen(null)} />}
</AnimatePresence>
</>
);
};
|