animated-modal

1"use client";
2import { cn } from "@/lib/utils";
3import { AnimatePresence, motion } from "motion/react";
4import React, {
5  ReactNode,
6  createContext,
7  useContext,
8  useEffect,
9  useRef,
10  useState,
11} from "react";
12 
13interface ModalContextType {
14  open: boolean;
15  setOpen: (open: boolean) => void;
16}
17 
18const ModalContext = createContext<ModalContextType | undefined>(undefined);
19 
20export const ModalProvider = ({ children }: { children: ReactNode }) => {
21  const [open, setOpen] = useState(false);
22 
23  return (
24    <ModalContext.Provider value={{ open, setOpen }}>
25      {children}
26    </ModalContext.Provider>
27  );
28};
29 
30export const useModal = () => {
31  const context = useContext(ModalContext);
32  if (!context) {
33    throw new Error("useModal must be used within a ModalProvider");
34  }
35  return context;
36};
37 
38export function Modal({ children }: { children: ReactNode }) {
39  return <ModalProvider>{children}</ModalProvider>;
40}
41 
42export const ModalTrigger = ({
43  children,
44  className,
45}: {
46  children: ReactNode;
47  className?: string;
48}) => {
49  const { setOpen } = useModal();
50  return (
51    <button
52      className={cn(
53        "px-4 py-2 rounded-md text-black dark:text-white text-center relative overflow-hidden",
54        className
55      )}
56      onClick={() => setOpen(true)}
57    >
58      {children}
59    </button>
60  );
61};
62 
63export const ModalBody = ({
64  children,
65  className,
66}: {
67  children: ReactNode;
68  className?: string;
69}) => {
70  const { open } = useModal();
71 
72  useEffect(() => {
73    if (open) {
74      document.body.style.overflow = "hidden";
75    } else {
76      document.body.style.overflow = "auto";
77    }
78  }, [open]);
79 
80  const modalRef = useRef(null);
81  const { setOpen } = useModal();
82  useOutsideClick(modalRef, () => setOpen(false));
83 
84  return (
85    <AnimatePresence>
86      {open && (
87        <motion.div
88          initial={{
89            opacity: 0,
90          }}
91          animate={{
92            opacity: 1,
93            backdropFilter: "blur(10px)",
94          }}
95          exit={{
96            opacity: 0,
97            backdropFilter: "blur(0px)",
98          }}
99          className="fixed [perspective:800px] [transform-style:preserve-3d] inset-0 h-full w-full  flex items-center justify-center z-50"
100        >
101          <Overlay />
102 
103          <motion.div
104            ref={modalRef}
105            className={cn(
106// … truncated