Spaces:
Runtime error
Runtime error
File size: 3,044 Bytes
4f2c36e 5881efa 6233641 5881efa 6233641 02b9873 6233641 4f2c36e 5881efa 848e268 5881efa 0891679 4f2c36e 5881efa 5240c42 5881efa 02b9873 5240c42 4f2c36e 5881efa 17f8f56 18c4283 4a320f9 5240c42 5881efa 4a320f9 5881efa 5240c42 5881efa b706925 5881efa 02b9873 5240c42 02b9873 5881efa 7e19cbb 5881efa 6233641 5881efa 6233641 a329b36 6233641 5881efa 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 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
import { useMemo } from "react";
import { motion } from "framer-motion";
import classNames from "classnames";
import { AiFillEyeInvisible } from "react-icons/ai";
import { Image } from "@/utils/type";
import { useInputGeneration } from "@/components/main/hooks/useInputGeneration";
import { Button } from "@/components/button";
interface Props {
index: number;
collection: Image;
className?: string;
onOpen: (id: string) => void;
}
export const Collection: React.FC<Props> = ({
collection,
index,
className,
onOpen,
}) => {
const { setPrompt } = useInputGeneration();
const formatDate = useMemo(() => {
const date = new Date(collection.createdAt);
return date.toLocaleDateString();
}, [collection.createdAt]);
return (
<div className={`h-[377px] w-full relative ${className}`}>
<motion.div
initial={{ y: 100, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
data-id={collection.id}
transition={{
duration: 0.35,
delay: (index % 15) * 0.1,
}}
className="rounded-[33px] h-[377px] cursor-pointer group overflow-hidden relative z-[1] group"
onClick={() => onOpen(collection.id)}
>
<div className="absolute top-0 left-0 w-full h-full translate-y-full opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100 flex items-end p-3">
<div className="bg-[#292424] backdrop-blur-sm bg-opacity-60 rounded-xl p-3 border-white/20 border w-full">
<p className="text-xs font-semibold text-white/60 mb-0.5">
{formatDate}
</p>
<p className="text-lg font-medium text-white lowercase leading-snug">
{collection.prompt?.length > 200
? `${collection.prompt.slice(0, 200)}...`
: collection.prompt}
</p>
<p
className="text-white text-sm text-right font-semibold mt-2"
onClick={(e) => {
e.stopPropagation();
setPrompt(collection.prompt);
}}
>
Try it now
</p>
</div>
</div>
<div
style={{
backgroundImage: `url(https://huggingface.co/datasets/enzostvs/stable-diffusion-tpu-generations/resolve/main/images/${collection.file_name}.png)`,
}}
className={classNames(
"rounded-[33px] bg-gray-950 bg-cover absolute top-0 left-0 w-full h-full z-[-1] transition-all duration-200 group-hover:scale-110 bg-center",
{
"opacity-40": !collection.is_visible,
}
)}
/>
{!collection.is_visible && (
<div className="flex items-center justify-end px-5 py-6 gap-2">
<p className="text-white/70 font-semibold text-lg lg:text-xl">
Waiting for validation.
</p>
<AiFillEyeInvisible className="text-white/70 text-2xl" />
</div>
)}
</motion.div>
</div>
);
};
|