@alphasquad/saleor-template-advance 0.1.0

package/src/app/components/reuseableUI/loadingUI.tsx

@@ -0,0 +1,12 @@
+import { cn } from '@/app/utils/functions'
+import React from 'react'
+
+const LoadingUI = ({ className, iconSize }: { className?: string, iconSize?: number }) => {
+    return (
+        <div className={cn("flex items-center justify-center h-[20vh]", className)}>
+            <div className={cn("animate-spin rounded-full border-b-2 border-gray-900", iconSize ? iconSize : "size-20")} />
+        </div>
+    )
+}
+
+export default LoadingUI

package/src/app/components/reuseableUI/modalLayout.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { cn } from "@/app/utils/functions";
+import { ModalCrossIcon } from "@/app/utils/svgs/paymentProcessingIcons/modalCrossIcon";
+import { useEffect } from "react";
+
+const ModalLayout = ({
+  children,
+  isModalOpen,
+  onClose,
+  className,
+  removeCrossIcon,
+  removeBgClose = false,
+  heading,
+}: {
+  children: React.ReactNode;
+  isModalOpen: boolean;
+  onClose: () => void;
+  className?: string;
+  removeCrossIcon?: boolean;
+  removeBgClose?: boolean;
+  heading?: string;
+}) => {
+  useEffect(() => {
+    if (isModalOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+  }, [isModalOpen]);
+  return (
+    <>
+      <div className={cn("", isModalOpen ? "fixed left-0 top-0 h-full w-full z-[102]" : "")}>
+        {isModalOpen && (
+          <div
+            onClick={() => {
+              if (!removeBgClose) {
+                onClose()
+              }
+            }}
+            className="bg-black/60 w-full h-full absolute top-0 z-[110]"
+          />
+        )}
+        <div
+          className={cn(
+            `fixed bottom-0 overflow-y-auto lg:inset-0 h-[calc(100dvh-8rem)] m-auto w-full lg:h-fit lg:overflow-hidden z-[120] bg-white lg:max-w-5xl px-4 py-6 md:px-6 lg:p-10 transition-all duration-[400ms] ease-in-out`,
+            isModalOpen ? "translate-y-0 opacity-100" : "translate-y-full opacity-0 pointer-events-none",
+            className
+          )}
+        >
+          <div className="flex items-center justify-between w-full">
+            {
+              heading && (
+                <h2 className="font-semibold text-[var(--color-secondary-800)] font-secondary text-xl" >
+                  {heading}
+                </h2>
+              )
+            }
+            {!removeCrossIcon && (
+              <button
+                onClick={onClose}
+                className="text-black absolute top-5 right-5 [&>svg]:size-4 size-6 p-1 rounded-full bg-[var(--color-secondary-200)] cursor-pointer"
+              >
+                {ModalCrossIcon}
+              </button>
+            )}
+          </div>
+
+          {children}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ModalLayout;