32 lines
792 B
TypeScript
32 lines
792 B
TypeScript
import { AnimatePresence, motion } from "motion/react";
|
|
import usePopupStore from "../store/popupStore";
|
|
import { useEffect } from "react";
|
|
|
|
function PopupContainer() {
|
|
const { popup } = usePopupStore();
|
|
|
|
const isMobile = innerWidth < 640;
|
|
|
|
useEffect(() => {
|
|
console.log(popup);
|
|
}, [popup]);
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{popup && (
|
|
<motion.div
|
|
className="fixed bottom-0"
|
|
initial={{ opacity: 0, y: isMobile ? "100%" : undefined }}
|
|
animate={{ opacity: 1, y: isMobile ? "0%" : undefined }}
|
|
exit={{ opacity: 0, y: isMobile ? "100%" : undefined }}
|
|
transition={{ bounce: 0, ease: "easeInOut" }}
|
|
>
|
|
{popup}
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|
|
|
|
export default PopupContainer;
|