Spaces:
Runtime error
Runtime error
File size: 2,466 Bytes
5240c42 848e268 5240c42 e270a74 5240c42 81969cf 5240c42 848e268 5240c42 848e268 2d49c67 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 |
import { useMemo } from "react";
import { motion } from "framer-motion";
import Image from "next/image";
import { arrayBufferToBase64 } from "@/utils";
import { useCollection } from "./useCollection";
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 } = useCollection(id);
if (!collection) return null;
const bufferToBase64 = useMemo(() => {
if (!collection) return;
const base64Flag = "data:image/jpeg;base64,";
const imageStr = arrayBufferToBase64(collection.blob.data);
return base64Flag + imageStr;
}, [collection]);
const formatDate = useMemo(() => {
if (!collection) return;
const date = new Date(collection.createdAt);
return date.toLocaleDateString();
}, [collection?.createdAt]);
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 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"
>
<Image
src={bufferToBase64 as string}
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(${bufferToBase64})`,
}}
/>
<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>
);
};
|