components/main/collections/loading.tsx

import { useMemo } from "react";
import { motion } from "framer-motion";

import { Collection as CollectionType } from "@/type";

interface Props {
  prompt: string;
}

export const CollectionLoading: React.FC<Props> = ({ prompt }) => {
  return (
    <div className="h-[377px] w-full relative">
      <motion.div
        initial={{ y: 100, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.35, delay: 0.1 }}
        className="rounded-3xl h-[377px] cursor-pointer group overflow-hidden relative z-[1] group bg-primary/70 flex flex-col justify-between p-8"
      >
        <div className="loading-dots translate-y-[5px]">
          <span />
          <span />
          <span />
        </div>
        <p className="text-white/50 font-semibold text-xl">{prompt}</p>
      </motion.div>
    </div>
  );
};