@imksh/create 1.0.27 → 1.0.28

package/templates/layers/react/javascript/src/components/common/Modal.jsx

@@ -0,0 +1,108 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { IoClose } from "react-icons/io5";
+import { useUiStore } from "../../store/useUiStore";
+const sizes = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-2xl",
+  "2xl": "max-w-4xl",
+  full: "max-w-7xl",
+};
+const Modal = ({
+  open,
+  onClose,
+  title,
+  children,
+  size = "md",
+  closeOnBackdrop = true,
+  closeOnEsc = true,
+  showCloseButton = true,
+  hideHeader = false,
+  className = "",
+  footer,
+}) => {
+  const setModalOpen = useUiStore((state) => state.setModalOpen);
+  useEffect(() => {
+    if (open) {
+      setModalOpen(true);
+      return () => {
+        setModalOpen(false);
+      };
+    }
+  }, [open, setModalOpen]);
+  useEffect(() => {
+    if (!open || !closeOnEsc) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose?.();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, closeOnEsc, onClose]);
+  if (!open) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs("div", {
+      className: "fixed inset-0 z-[9999] flex items-center justify-center p-4",
+      children: [
+        /* @__PURE__ */ jsx("div", {
+          className: "absolute inset-0 bg-black/50 backdrop-blur-sm",
+          onClick: closeOnBackdrop ? onClose : void 0,
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          className: `
+          relative
+          flex flex-col overflow-hidden max-h-[90vh]
+          w-full
+          ${sizes[size]}
+          rounded-2xl
+          bg-base-100
+          shadow-2xl
+          border border-base-300
+          animate-in zoom-in-95 fade-in duration-200
+          ${className}
+        `,
+          children: [
+            !hideHeader &&
+              (title || showCloseButton) &&
+              /* @__PURE__ */ jsxs("div", {
+                className:
+                  "flex items-center justify-between border-b border-base-300 px-6 py-4 shrink-0",
+                children: [
+                  title &&
+                    /* @__PURE__ */ jsx("h2", {
+                      className: "text-lg font-bold",
+                      children: title,
+                    }),
+                  showCloseButton &&
+                    /* @__PURE__ */ jsx("button", {
+                      className: "btn btn-circle btn-sm btn-ghost",
+                      onClick: onClose,
+                      children: /* @__PURE__ */ jsx(IoClose, { size: 20 }),
+                    }),
+                ],
+              }),
+            /* @__PURE__ */ jsx("div", {
+              className: "flex-1 min-h-0 overflow-y-auto p-6",
+              "data-lenis-prevent": "true",
+              children,
+            }),
+            footer &&
+              /* @__PURE__ */ jsx("div", {
+                className: "border-t border-base-300 px-6 py-4 shrink-0",
+                children: footer,
+              }),
+          ],
+        }),
+      ],
+    }),
+    document.body,
+  );
+};
+var Modal_default = Modal;
+export { Modal_default as default };

package/templates/{mern/client → layers/react/javascript}/src/components/common/NotFound.jsx

@@ -75,4 +75,4 @@ const NotFound = () => {
   );
 };
 
-export default NotFound;
+export default NotFound;

package/templates/layers/react/javascript/src/components/common/PageTransition.jsx

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+const pageVariants = {
+  initial: {
+    opacity: 0,
+    y: 8,
+  },
+  in: {
+    opacity: 1,
+    y: 0,
+  },
+  out: {
+    opacity: 0,
+    y: -8,
+  },
+};
+const pageTransition = {
+  type: "tween",
+  ease: "anticipate",
+  duration: 0.3,
+};
+const PageTransition = ({ children, className = "" }) => {
+  return /* @__PURE__ */ jsx(motion.div, {
+    initial: "initial",
+    animate: "in",
+    exit: "out",
+    variants: pageVariants,
+    transition: pageTransition,
+    className: `h-full w-full ${className}`,
+    children,
+  });
+};
+var PageTransition_default = PageTransition;
+export { PageTransition_default as default };

package/templates/layers/react/javascript/src/components/common/Pagination.jsx

@@ -0,0 +1,81 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+const Pagination = ({ currentPage, totalPages, onPageChange }) => {
+  if (totalPages <= 1) return null;
+  const maxVisiblePages = 5;
+  let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
+  const endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
+  if (endPage - startPage + 1 < maxVisiblePages) {
+    startPage = Math.max(1, endPage - maxVisiblePages + 1);
+  }
+  const pages = [];
+  for (let i = startPage; i <= endPage; i++) {
+    pages.push(i);
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    className:
+      "flex items-center justify-center gap-2 mt-10 p-2 rounded-2xl bg-base-100/50 backdrop-blur-sm border border-base-200/50 w-fit mx-auto shadow-sm",
+    children: [
+      /* @__PURE__ */ jsx("button", {
+        onClick: () => onPageChange(currentPage - 1),
+        disabled: currentPage === 1,
+        className:
+          "flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-200 text-base-content/70 hover:bg-base-content/10 hover:text-base-content disabled:opacity-30 disabled:hover:bg-transparent",
+        "aria-label": "Previous Page",
+        children: /* @__PURE__ */ jsx(ChevronLeft, { className: "w-5 h-5" }),
+      }),
+      startPage > 1 &&
+        /* @__PURE__ */ jsxs(Fragment, {
+          children: [
+            /* @__PURE__ */ jsx("button", {
+              onClick: () => onPageChange(1),
+              className:
+                "flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-200 font-medium text-base-content/70 hover:bg-base-content/10 hover:text-base-content",
+              children: "1",
+            }),
+            startPage > 2 &&
+              /* @__PURE__ */ jsx("span", {
+                className: "px-1 text-base-content/40",
+                children: "...",
+              }),
+          ],
+        }),
+      pages.map((page) =>
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => onPageChange(page),
+            className: `flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-300 font-semibold ${currentPage === page ? "bg-primary text-primary-content shadow-lg shadow-primary/30 scale-105" : "text-base-content/70 hover:bg-base-content/10 hover:text-base-content"}`,
+            children: page,
+          },
+          page,
+        ),
+      ),
+      endPage < totalPages &&
+        /* @__PURE__ */ jsxs(Fragment, {
+          children: [
+            endPage < totalPages - 1 &&
+              /* @__PURE__ */ jsx("span", {
+                className: "px-1 text-base-content/40",
+                children: "...",
+              }),
+            /* @__PURE__ */ jsx("button", {
+              onClick: () => onPageChange(totalPages),
+              className:
+                "flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-200 font-medium text-base-content/70 hover:bg-base-content/10 hover:text-base-content",
+              children: totalPages,
+            }),
+          ],
+        }),
+      /* @__PURE__ */ jsx("button", {
+        onClick: () => onPageChange(currentPage + 1),
+        disabled: currentPage === totalPages,
+        className:
+          "flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-200 text-base-content/70 hover:bg-base-content/10 hover:text-base-content disabled:opacity-30 disabled:hover:bg-transparent",
+        "aria-label": "Next Page",
+        children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-5 h-5" }),
+      }),
+    ],
+  });
+};
+export { Pagination };

package/templates/{react → layers/react/javascript}/src/components/common/SEO.jsx

@@ -1,13 +1,7 @@
 import { useEffect } from "react";
 import { useLocation } from "react-router-dom";
 
-const SEO = ({
-  title,
-  description,
-  keywords,
-  canonical,
-  noIndex = false,
-}) => {
+const SEO = ({ title, description, keywords, canonical, noIndex = false }) => {
   const location = useLocation();
 
   useEffect(() => {
@@ -46,9 +40,7 @@ const SEO = ({
       document.head.appendChild(link);
     }
 
-    link.href =
-      canonical ||
-      `https://shreebaglamukhi.com${location.pathname}`;
+    link.href = canonical || `https://shreebaglamukhi.com${location.pathname}`;
 
     // ROBOTS
     let robots = document.querySelector("meta[name='robots']");
@@ -64,4 +56,4 @@ const SEO = ({
   return null;
 };
 
-export default SEO;
+export default SEO;

package/templates/{react → layers/react/javascript}/src/components/common/Scroll.jsx

@@ -22,4 +22,4 @@ export default function ScrollRestoration() {
   }, [key, pathname, navigationType]);
 
   return null;
-}
+}

package/templates/layers/react/javascript/src/components/common/Table.jsx

@@ -0,0 +1,143 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import TableSkeleton from "../skeletons/common/TableSkeleton";
+const Table = ({
+  columns = [],
+  data = [],
+  loading = false,
+  onRowClick = null,
+  emptyMessage = "No data available",
+  currentPage = 1,
+  totalPages = 1,
+  onPageChange = null,
+}) => {
+  if (loading) {
+    return /* @__PURE__ */ jsx(TableSkeleton, {
+      rows: 5,
+      columns: columns.length || 4,
+    });
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    className:
+      "flex flex-col w-full border border-base-300 rounded-xl overflow-hidden bg-base-100 shadow",
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: "overflow-x-auto w-full",
+        children: /* @__PURE__ */ jsxs("table", {
+          className: "table table-hover w-full min-w-full",
+          children: [
+            /* @__PURE__ */ jsx("thead", {
+              className: "bg-base-200/60 border-b border-base-300",
+              children: /* @__PURE__ */ jsx("tr", {
+                children: columns.map((col, index) =>
+                  /* @__PURE__ */ jsx(
+                    "th",
+                    {
+                      className:
+                        "px-6 py-4 text-left text-xs font-bold text-base-content/80 uppercase tracking-wider",
+                      children: col.header,
+                    },
+                    col.accessor || index,
+                  ),
+                ),
+              }),
+            }),
+            /* @__PURE__ */ jsx("tbody", {
+              className: "divide-y divide-base-300 bg-base-100",
+              children:
+                data.length > 0
+                  ? data.map((row, rowIndex) =>
+                      /* @__PURE__ */ jsx(
+                        "tr",
+                        {
+                          onClick: () => onRowClick && onRowClick(row),
+                          className: `transition-colors duration-150 ${onRowClick ? "cursor-pointer hover:bg-base-200" : ""}`,
+                          children: columns.map((col, colIndex) => {
+                            const value = col.accessor
+                              ? row[col.accessor]
+                              : void 0;
+                            return /* @__PURE__ */ jsx(
+                              "td",
+                              {
+                                className:
+                                  "px-6 py-4 text-sm text-base-content/90 whitespace-nowrap align-middle",
+                                children: col.render
+                                  ? col.render(value, row, rowIndex)
+                                  : value,
+                              },
+                              col.accessor || colIndex,
+                            );
+                          }),
+                        },
+                        row.id || rowIndex,
+                      ),
+                    )
+                  : /* @__PURE__ */ jsx("tr", {
+                      children: /* @__PURE__ */ jsx("td", {
+                        colSpan: columns.length,
+                        className:
+                          "px-6 py-12 text-center text-sm text-base-content/60",
+                        children: /* @__PURE__ */ jsxs("div", {
+                          className:
+                            "flex flex-col items-center justify-center gap-2",
+                          children: [
+                            /* @__PURE__ */ jsx("span", {
+                              className: "text-2xl",
+                              children: "\u{1F4C1}",
+                            }),
+                            /* @__PURE__ */ jsx("span", {
+                              children: emptyMessage,
+                            }),
+                          ],
+                        }),
+                      }),
+                    }),
+            }),
+          ],
+        }),
+      }),
+      totalPages > 1 &&
+        onPageChange &&
+        /* @__PURE__ */ jsxs("div", {
+          className:
+            "border-t border-base-300 px-6 py-4 bg-base-200/30 flex items-center justify-between shrink-0",
+          children: [
+            /* @__PURE__ */ jsxs("div", {
+              className: "text-xs text-base-content/75 font-medium",
+              children: [
+                "Page ",
+                /* @__PURE__ */ jsx("span", {
+                  className: "font-bold",
+                  children: currentPage,
+                }),
+                " of",
+                " ",
+                /* @__PURE__ */ jsx("span", {
+                  className: "font-bold",
+                  children: totalPages,
+                }),
+              ],
+            }),
+            /* @__PURE__ */ jsxs("div", {
+              className: "flex gap-2",
+              children: [
+                /* @__PURE__ */ jsx("button", {
+                  onClick: () => onPageChange(currentPage - 1),
+                  disabled: currentPage <= 1,
+                  className: "btn btn-sm btn-outline rounded-lg text-xs",
+                  children: "Previous",
+                }),
+                /* @__PURE__ */ jsx("button", {
+                  onClick: () => onPageChange(currentPage + 1),
+                  disabled: currentPage >= totalPages,
+                  className: "btn btn-sm btn-outline rounded-lg text-xs",
+                  children: "Next",
+                }),
+              ],
+            }),
+          ],
+        }),
+    ],
+  });
+};
+var Table_default = Table;
+export { Table_default as default };

package/templates/layers/react/javascript/src/components/common/Tabs.jsx

@@ -0,0 +1,134 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { ChevronDown } from "lucide-react";
+import { motion } from "framer-motion";
+const Tabs = ({
+  tabs,
+  activeTab,
+  onChange,
+  variant = "underline",
+  className = "",
+  dropdown = false,
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  React.useEffect(() => {
+    if (!dropdown || !isOpen) return;
+    const closeMenu = () => setIsOpen(false);
+    document.addEventListener("click", closeMenu);
+    return () => document.removeEventListener("click", closeMenu);
+  }, [dropdown, isOpen]);
+  const renderDropdown = () => {
+    if (!dropdown) return null;
+    const activeItem = tabs.find((t) => t.id === activeTab);
+    return /* @__PURE__ */ jsxs("div", {
+      className: "relative md:hidden w-full max-w-xs z-[50]",
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxs("button", {
+          onClick: () => setIsOpen(!isOpen),
+          className:
+            "btn btn-sm bg-base-200 border-base-300 border flex w-full items-center justify-between px-3 text-base-content ",
+          children: [
+            /* @__PURE__ */ jsxs("div", {
+              className: "flex items-center gap-1.5",
+              children: [
+                activeItem?.icon,
+                /* @__PURE__ */ jsx("span", {
+                  className: "font-semibold",
+                  children: activeItem?.label,
+                }),
+              ],
+            }),
+            /* @__PURE__ */ jsx(ChevronDown, {
+              size: 14,
+              className: `opacity-50 transition-transform ${isOpen ? "rotate-180" : ""}`,
+            }),
+          ],
+        }),
+        isOpen &&
+          /* @__PURE__ */ jsx("div", {
+            className:
+              "absolute top-full left-0 right-0 mt-1 bg-base-100 border border-base-200 shadow rounded-lg py-1 animate-in fade-in slide-in-from-top-2",
+            children: tabs.map((tab) =>
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => {
+                    onChange(tab.id);
+                    setIsOpen(false);
+                  },
+                  className: `w-full flex items-center gap-2 px-3 py-2 text-sm transition-colors ${activeTab === tab.id ? "bg-primary/10 text-primary font-semibold" : "hover:bg-base-200 text-base-content/80"}`,
+                  children: [tab.icon, tab.label],
+                },
+                tab.id,
+              ),
+            ),
+          }),
+      ],
+    });
+  };
+  if (variant === "box") {
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        renderDropdown(),
+        /* @__PURE__ */ jsx("div", {
+          className: `tabs tabs-boxed bg-base-200 p-1 flex-nowrap overflow-x-auto hide-scrollbar shrink-0 rounded-lg ${dropdown ? "hidden md:flex" : "flex"} ${className}`,
+          children: tabs.map((tab) =>
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => onChange(tab.id),
+                className: `tab whitespace-nowrap flex items-center rounded-lg gap-2 relative z-0 ${activeTab === tab.id ? "text-primary-content" : "text-base-content/70 hover:text-base-content"}`,
+                children: [
+                  activeTab === tab.id &&
+                    /* @__PURE__ */ jsx(motion.div, {
+                      layoutId: "activeTabBox",
+                      className: "absolute inset-0 bg-primary rounded-lg -z-10",
+                      transition: { type: "spring", duration: 0, bounce: 0.2 },
+                    }),
+                  tab.icon,
+                  tab.label,
+                ],
+              },
+              tab.id,
+            ),
+          ),
+        }),
+      ],
+    });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      renderDropdown(),
+      /* @__PURE__ */ jsx("div", {
+        className: `tabs tabs-bordered ${dropdown ? "hidden md:flex" : "flex"} ${className}`,
+        children: tabs.map((tab) =>
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => onChange(tab.id),
+              className: `tab whitespace-nowrap relative !border-transparent ${activeTab === tab.id ? "font-semibold text-primary" : "text-base-content/70 hover:text-base-content"}`,
+              children: [
+                activeTab === tab.id &&
+                  /* @__PURE__ */ jsx(motion.div, {
+                    layoutId: "activeTabUnderline",
+                    className:
+                      "absolute bottom-0 left-0 right-0 h-0.5 bg-primary",
+                    transition: { type: "spring", duration: 0.5, bounce: 0.2 },
+                  }),
+                tab.icon &&
+                  /* @__PURE__ */ jsx("span", {
+                    className: "mr-2",
+                    children: tab.icon,
+                  }),
+                tab.label,
+              ],
+            },
+            tab.id,
+          ),
+        ),
+      }),
+    ],
+  });
+};
+export { Tabs };

package/templates/layers/react/javascript/src/components/common/modals/ConfirmModal.jsx

@@ -0,0 +1,119 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircle, Trash2, Info } from "lucide-react";
+import Modal from "../Modal";
+const ConfirmModal = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  type = "danger",
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  isLoading = false,
+}) => {
+  const getTypeStyles = () => {
+    switch (type) {
+      case "danger":
+        return {
+          icon: /* @__PURE__ */ jsx(Trash2, {
+            size: 24,
+            className: "text-error relative z-10",
+          }),
+          iconBg: "bg-error/10 border-error/20",
+          iconGlow: "bg-error/20",
+          btn: "bg-gradient-to-r from-error to-error/80 hover:from-error/90 hover:to-error text-error-content border-none shadow-[0_4px_12px_rgba(239,68,68,0.25)] hover:shadow-[0_6px_16px_rgba(239,68,68,0.4)] hover:-translate-y-0.5 transition-all duration-300",
+          border: "border-error/20",
+        };
+      case "warning":
+        return {
+          icon: /* @__PURE__ */ jsx(AlertCircle, {
+            size: 24,
+            className: "text-warning relative z-10",
+          }),
+          iconBg: "bg-warning/10 border-warning/20",
+          iconGlow: "bg-warning/20",
+          btn: "bg-gradient-to-r from-warning to-warning/80 hover:from-warning/90 hover:to-warning text-warning-content border-none shadow-[0_4px_12px_rgba(245,158,11,0.25)] hover:shadow-[0_6px_16px_rgba(245,158,11,0.4)] hover:-translate-y-0.5 transition-all duration-300",
+          border: "border-warning/20",
+        };
+      default:
+        return {
+          icon: /* @__PURE__ */ jsx(Info, {
+            size: 24,
+            className: "text-info relative z-10",
+          }),
+          iconBg: "bg-info/10 border-info/20",
+          iconGlow: "bg-info/20",
+          btn: "bg-gradient-to-r from-info to-info/80 hover:from-info/90 hover:to-info text-info-content border-none shadow-[0_4px_12px_rgba(14,165,233,0.25)] hover:shadow-[0_6px_16px_rgba(14,165,233,0.4)] hover:-translate-y-0.5 transition-all duration-300",
+          border: "border-info/20",
+        };
+    }
+  };
+  const styles = getTypeStyles();
+  return /* @__PURE__ */ jsxs(Modal, {
+    open: isOpen,
+    onClose,
+    hideHeader: true,
+    size: "sm",
+    className: `p-8 !max-w-md ${styles.border}`,
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: `absolute top-0 left-0 w-full h-1 ${styles.btn.split(" ")[0]} ${styles.btn.split(" ")[1]}`,
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex flex-col items-center text-center",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            className: "relative mb-5",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                className: `absolute inset-0 rounded-full blur-xl animate-pulse-glow ${styles.iconGlow}`,
+              }),
+              /* @__PURE__ */ jsx("div", {
+                className: `relative w-14 h-14 rounded-full flex items-center justify-center border ${styles.iconBg} shadow-inner`,
+                children: styles.icon,
+              }),
+            ],
+          }),
+          /* @__PURE__ */ jsx("h3", {
+            className:
+              "font-bold text-2xl mb-3 text-base-content tracking-tight",
+            children: title,
+          }),
+          /* @__PURE__ */ jsx("div", {
+            className: "text-base-content/70 mb-8 leading-relaxed text-sm px-2",
+            children: message,
+          }),
+        ],
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex items-center justify-center gap-4 w-full",
+        children: [
+          /* @__PURE__ */ jsx("button", {
+            type: "button",
+            className:
+              "btn btn-ghost rounded-xl px-6 flex-1 hover:-translate-y-0.5 transition-all duration-300",
+            onClick: () => {
+              if (!isLoading) onClose();
+            },
+            disabled: isLoading,
+            children: cancelText,
+          }),
+          /* @__PURE__ */ jsx("button", {
+            type: "button",
+            className: `btn rounded-xl px-6 flex-1 ${styles.btn}`,
+            onClick: onConfirm,
+            disabled: isLoading,
+            children: isLoading
+              ? /* @__PURE__ */ jsx("span", {
+                  className: "loading loading-spinner loading-sm",
+                })
+              : confirmText,
+          }),
+        ],
+      }),
+    ],
+  });
+};
+var ConfirmModal_default = ConfirmModal;
+export { ConfirmModal_default as default };