components/main/collections/collection.tsx

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

interface Props {
  collection: {
    prompt: string;
    blob: {
      data: ArrayBuffer;
      type: string;
    };
    id: number;
  };
}

export const Collection: React.FC<Props> = ({ collection }) => {
  const arrayBufferToBase64 = (buffer: ArrayBuffer) => {
    let binary = "";
    const bytes = [].slice.call(new Uint8Array(buffer));
    bytes.forEach((b: any) => (binary += String.fromCharCode(b)));
    return window.btoa(binary);
  };

  const bufferToBase64 = useMemo(() => {
    const base64Flag = "data:image/jpeg;base64,";
    const imageStr = arrayBufferToBase64(collection.blob.data);
    return base64Flag + imageStr;
  }, [collection]);

  return (
    <motion.div
      initial={{ y: 100, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ duration: 0.35, delay: collection.id * 0.1 }}
      className="rounded-3xl h-[377px] bg-cover cursor-pointer z-[1] group overflow-hidden p-3 relative flex items-end group"
    >
      <div className="bg-[#292424] bg-opacity-60 rounded-xl p-3 border-white/20 border w-full translate-y-full opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100">
        <p className="text-xs font-semibold text-white/60 mb-0.5">27 October</p>
        <p className="text-lg font-medium text-white lowercase leading-snug">
          {collection.prompt}
        </p>
        <p className="text-white text-sm text-right font-semibold mt-2">
          Try it now
        </p>
      </div>
      <div
        style={{
          backgroundImage: `url(${bufferToBase64})`,
        }}
        className="rounded-3xl bg-red-400 bg-cover absolute top-0 left-0 w-full h-full z-[-1] transition-all duration-200 group-hover:scale-125 bg-center"
      />
    </motion.div>
  );
};