components/modal.tsx


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

type ModalProps = {
  open: boolean;
  onClose: () => void;
  children: React.ReactNode;
};

export default function Modal({ open, onClose, children }: ModalProps) {
  return (
    <div
      onClick={onClose}
      className={`fixed z-[999] inset-0 flex justify-center items-center transition-colors ${
        open ? "visible bg-black bg-opacity-50 backdrop-blur-sm" : "invisible"
      }`}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        className={`shadow rounded-xl transition-all ${
          open ? "scale-100 opacity-100" : "scale-75 opacity-0"
        }`}
      >
        {children}
      </div>
    </div>
  );
}