Spaces:
Runtime error
Runtime error
File size: 3,166 Bytes
5240c42 848e268 6233641 5240c42 6233641 5240c42 e270a74 5240c42 6233641 5240c42 6233641 5240c42 6233641 5240c42 6233641 5240c42 6233641 848e268 6233641 848e268 2d49c67 5240c42 6233641 5240c42 6233641 5240c42 |
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 88 89 90 91 92 93 94 95 96 97 98 99 100 |
import { useMemo } from "react";
import { motion } from "framer-motion";
import Image from "next/image";
import { BsFillTrashFill } from "react-icons/bs";
import { AiFillCheckCircle } from "react-icons/ai";
import { useCollection } from "./useCollection";
import { Button } from "../button";
import { useUser } from "@/utils/useUser";
interface Props {
id: string;
onClose: () => void;
}
const dropIn = {
hidden: {
opacity: 0,
},
visible: {
y: "0",
opacity: 1,
transition: {
duration: 0.1,
type: "spring",
damping: 25,
stiffness: 500,
},
},
exit: {
opacity: 0,
},
};
export const Modal: React.FC<Props> = ({ id, onClose }) => {
const { collection, updateVisibility, remove } = useCollection(id);
const { user } = useUser();
const formatDate = useMemo(() => {
if (!collection) return;
const date = new Date(collection?.createdAt);
return date.toLocaleDateString();
}, [collection?.createdAt]);
console.log(user);
return (
<motion.div
onClick={onClose}
className="fixed top-0 w-screen h-screen left-0 bg-black/30 backdrop-blur-sm z-50 flex items-center justify-center p-6"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
<motion.div
onClick={(e) => e.stopPropagation()}
className="max-w-2xl h-auto w-full z-[1] rounded-3xl overflow-hidden relative flex items-center justify-center flex-col gap-4 bg-white/30 backdrop-blur-sm px-2 pb-2 pt-2"
variants={dropIn}
initial="hidden"
animate="visible"
exit="exit"
>
{user?.is_admin && (
<div className="absolute p-2 rounded-full top-4 left-4 flex items-center justify-start gap-2 bg-black/20 backdrop-blur">
{!collection?.is_visible && (
<Button theme="white" onClick={updateVisibility}>
<AiFillCheckCircle />
Validate
</Button>
)}
<Button theme="danger" onClick={remove}>
<BsFillTrashFill />
Delete
</Button>
</div>
)}
<Image
src={`https://huggingface.co/datasets/enzostvs/stable-diffusion-tpu-generations/resolve/main/images/${collection?.file_name}.png?raw=true`}
alt="Generated image"
className="object-center object-contain w-full h-full rounded-2xl"
width={1024}
height={1024}
/>
<div
className="bg-cover bg-center w-full h-full rounded-2xl bg-no-repeat z-[-1] absolute top-0 left-0 opacity-90 blur-xl"
style={{
backgroundImage: `url(https://huggingface.co/datasets/enzostvs/stable-diffusion-tpu-generations/resolve/main/images/${collection?.file_name}.png?raw=true)`,
}}
/>
<div className="text-left w-full px-4 pb-3 pt-2">
<p className="text-sm font-medium text-white/60 mb-1">{formatDate}</p>
<p className="text-xl font-semibold text-white lowercase leading-snug">
{collection?.prompt}
</p>
</div>
</motion.div>
</motion.div>
);
};
|