components/main/collections/index.tsx

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>
    </>
  );
};