add model

src/components/modal/Modal.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "../../lib/cn";
+import { useClickOutside } from "../../hooks/useClickOutside";
+
+type ModalBackdrop = "opaque" | "blur";
+
+interface ModalProps {
+  className?: string;
+  children?: React.ReactNode;
+  backdrop?: ModalBackdrop;
+  open: boolean;
+  defaultOpen?: boolean;
+  onOpenChange: (state: boolean) => void;
+}
+
+const modalbgVariants = {
+  closed: { opacity: 0 },
+  open: { opacity: 1 },
+};
+
+const modalVariants = {
+  closed: { opacity: 0, scale: 0.9 },
+  open: { opacity: 1, scale: 1 },
+};
+
+export const Modal: React.FC<ModalProps> = ({
+  children,
+  open,
+  backdrop,
+  className,
+  onOpenChange,
+}) => {
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  useClickOutside(ref, () => {
+    onOpenChange(false);
+  });
+
+  return (
+    <div>
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            initial={modalbgVariants.closed}
+            animate={modalbgVariants.open}
+            exit={modalbgVariants.closed}
+            transition={{ duration: 0.15 }}
+            className={cn(
+              " fixed top-0 left-0 h-svh w-svw backdrop-filter transition-all  z-50",
+              // " pointer-events-none",
+              backdrop == "blur" && open ? "backdrop-blur-sm" : "",
+              backdrop == "opaque" && open ? "bg-[#00000055]" : ""
+            )}
+          ></motion.div>
+        )}
+      </AnimatePresence>
+      <div className="fixed top-0 left-0 h-svh w-svw flex items-center justify-center pointer-events-none  z-50">
+        <AnimatePresence>
+          {open && (
+            <motion.div
+              ref={ref}
+              className={cn(
+                "h-fit w-fit rounded-md pointer-events-auto",
+                className
+              )}
+              initial={modalVariants.closed}
+              animate={modalVariants.open}
+              exit={modalVariants.closed}
+              transition={{ duration: 0.15 }}
+            >
+              {children}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+};

src/views/home/groups/Groups.tsx

@@ -1,12 +1,14 @@
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { SecondaryButton } from "../../../components/button/SecondaryButton";
 import { cn } from "../../../lib/cn";
 import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
 import GroupsBlock from "./GroupsBlock";
 import { setMenuActivePage } from "../../../redux/slices/store";
 import { fetchMyGroups } from "../../../redux/slices/groups";
+import { Modal } from "../../../components/modal/Modal";
 
 const Groups = () => {
+    const [modalActive, setModalActive] = useState<boolean>(false);
     const dispatch = useAppDispatch();
 
     // Берём группы из стора
@@ -56,7 +58,7 @@ const Groups = () => {
                         Группы
                     </div>
                     <SecondaryButton
-                        onClick={() => {}}
+                        onClick={() => {setModalActive(true);}}
                         text="Создать группу"
                         className="absolute right-0"
                     />
@@ -80,6 +82,11 @@ const Groups = () => {
                     groups={hiddenGroups} // пока пусто
                 />
             </div>
+
+
+            <Modal className="bg-liquid-lighter p-[20px] rounded-[20px]" onOpenChange={setModalActive} open={modalActive} backdrop="blur" >
+                    <div>modal</div>
+            </Modal>
         </div>
     );
 };