Add family acc

2023-05-09 11:59:49 +01:00
parent 872ba3e0cc
commit 4eee3a4683
19 changed files with 2056 additions and 1362 deletions
@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+
+const CustomPopUp = ({ name, btn_class, title, children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleOpen = () => {
+    setIsOpen(true);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <>
+      <button onClick={handleOpen} className={btn_class}>
+        {name}
+      </button>
+
+      {isOpen && (
+        <div className={`fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50 transition-opacity ${isOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}>
+          <div className="bg-white rounded-md p-6 shadow-lg transform transition-all duration-300 ease-in-out lg:max-w-[400px] lg:min-h-[300px] max-w-[300px] min-h-[200px] w-full">
+            <div className="w-full flex justify-end">
+              <button onClick={handleClose}>
+                <CloseIcon />
+              </button>
+            </div>
+            {title && <h2 className="text-xl font-bold mb-2">{title}</h2>}
+            {children}
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default CustomPopUp;
+
+const CloseIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+    className="w-6 h-6"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M6 18L18 6M6 6l12 12"
+    />
+  </svg>
+);