add modal manager, animations, state management and hooks

common/components/modal/animations/ModalManagar.animations.ts

@@ -0,0 +1,14 @@
+import { DEFAULT_EASE } from "@/common/constants/easings";
+
+const transition= {ease: DEFAULT_EASE};
+
+export const bgAnimation = {
+    closed: {opacity: 0, transition},
+    opened: {opacity: 1, transition},
+};
+
+export const modalAnimation = {
+    closed: {y:-100, transition},
+    opened: {y:0, transition},
+    exited: {y:100, transition},
+};

common/constants/easings.ts

@@ -0,0 +1 @@
+export const DEFAULT_EASE= [0.6, 0.01, -0.05, 0.9];

common/recoil/modal/index.ts

@@ -0,0 +1,5 @@
+import { modalAtom } from "./modal.atom";
+import useModal from "./modal.hooks";
+
+export default modalAtom;
+export {useModal};

common/recoil/modal/modal.atom.tsx

@@ -0,0 +1,12 @@
+import { atom } from "recoil";
+
+export const modalAtom = atom <{
+    modal: JSX.Element | JSX.Element[];
+    opened: boolean;
+}>({
+    key: "modal",
+    default: {
+        modal:<></>,
+        opened: false,
+    },
+});

common/recoil/modal/modal.hooks.tsx

@@ -0,0 +1,23 @@
+import { useSetRecoilState } from "recoil";
+import { modalAtom } from "./modal.atom";
+
+const useModal = () => {
+    const setModal= useSetRecoilState(modalAtom);
+    const openModal = (modal: JSX.Element | JSX.Element[]) => {
+        setModal({
+            modal,
+            opened: true,
+        });
+    };
+
+    const closeModal = () => 
+        setModal({
+            modal: <></>,
+            opened: false,
+        });
+
+        return {openModal, closeModal};
+
+};
+
+export default useModal;