components/main/collections/index.tsx

import classNames from "classnames";
import { motion } from "framer-motion";

import { useCollections } from "../hooks/useCollections";
import { Collection } from "./collection";

const IMAGES = [
  "https://www.blueshadow.art/wp-content/uploads/2023/03/prompt13.jpg",
  "https://www.blueshadow.art/wp-content/uploads/2022/09/prompt01.jpg",
  "https://www.blueshadow.art/wp-content/uploads/2022/09/prompt02.jpg",
  "https://www.blueshadow.art/wp-content/uploads/2022/09/prompt06.jpg",
  "https://www.blueshadow.art/wp-content/uploads/2023/03/prompt14.jpg",
  "https://www.blueshadow.art/wp-content/uploads/2023/03/prompt17.jpg",
  "https://www.blueshadow.art/wp-content/uploads/2023/03/prompt18.jpg",
  "https://www.blueshadow.art/wp-content/uploads/2022/10/prompt27.jpg",
  "https://www.blueshadow.art/wp-content/uploads/2022/10/prompt32.jpg",
  "https://www.blueshadow.art/wp-content/uploads/2022/10/prompt34.jpg",
  "https://www.blueshadow.art/wp-content/uploads/2023/01/prompt44.jpg",
];

export const Collections = () => {
  const { collections, loading } = useCollections();

  if (loading) return;

  return (
    <div className="px-6 max-w-[1722px] 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((col, e) => (
        <div
          key={e}
          className={classNames("w-full grid-cols-1 grid gap-5", {
            "translate-y-12": e % 2,
          })}
        >
          {col.map((collection, i) => (
            <Collection key={i} collection={collection} />
          ))}
        </div>
      ))}
    </div>
  );
};