nvis-fe-cms-libs 1.1.23 → 1.1.25

package/dist/nvis-fe-cms-libs.umd.js

@@ -665,7 +665,7 @@ var __async = (__this, __arguments, generator) => {
     const timelineData = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.filter((item) => item == null ? void 0 : item.data).map((item) => item.data)) || [];
     const [timelineVisible, setTimelineVisible] = require$$0.useState([]);
     const timelineRefs = require$$0.useRef([]);
-    const sectionTitle = (section == null ? void 0 : section.title) || "";
+    const sectionTitle = (section == null ? void 0 : section.title) || "...";
     require$$0.useEffect(() => {
       setTimelineVisible(new Array(timelineData.length).fill(false));
     }, [timelineData.length]);
@@ -701,53 +701,49 @@ var __async = (__this, __arguments, generator) => {
     }
     return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: `py-20 ${isDarkMode ? "bg-gray-800" : "bg-white"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-12", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
             className: `relative inline-block px-4 py-2 rounded-full text-sm font-semibold mb-4 border transition-all duration-300 transform hover:scale-105 shadow-md hover:shadow-lg overflow-hidden ${isDarkMode ? "bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 text-emerald-300 border-blue-800" : "bg-white text-emerald-800 border-gray-200"}`,
-            children: [
-              "📈 ",
-              sectionTitle,
-              isDarkMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "div",
-                  {
-                    className: "absolute w-12 h-12 bg-white/5 rounded-full",
-                    style: { left: "10%", top: "20%" }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "div",
-                  {
-                    className: "absolute w-10 h-10 bg-white/5 rounded-full",
-                    style: { right: "30%", bottom: "10%" }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "div",
-                  {
-                    className: "absolute w-14 h-14 bg-white/5 rounded-md",
-                    style: { left: "20%", bottom: "30%" }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "div",
-                  {
-                    className: 'absolute inset-0 bg-[url("data:image/svg+xml,%3Csvg width=\\\\\\"60\\\\\\" height=\\\\\\"60\\\\\\" viewBox=\\\\\\"0 0 60 60\\\\\\" xmlns=\\\\\\"http://www.w3.org/2000/svg\\\\\\"%3E%3Cg fill=\\\\\\"none\\\\\\" fill-rule=\\\\\\"evenodd\\\\\\"%3E%3Cg fill=\\\\\\"%23ffffff\\\\\\" fill-opacity=\\\\\\"0.05\\\\\\"%3E%3Ccircle cx=\\\\\\"30\\\\\\" cy=\\\\\\"30\\\\\\" r=\\\\\\"2\\\\\\"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")] opacity-20'
-                  }
-                )
-              ] })
-            ]
+            children: isDarkMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  className: "absolute w-12 h-12 bg-white/5 rounded-full",
+                  style: { left: "10%", top: "20%" }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  className: "absolute w-10 h-10 bg-white/5 rounded-full",
+                  style: { right: "30%", bottom: "10%" }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  className: "absolute w-14 h-14 bg-white/5 rounded-md",
+                  style: { left: "20%", bottom: "30%" }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  className: 'absolute inset-0 bg-[url("data:image/svg+xml,%3Csvg width=\\\\\\"60\\\\\\" height=\\\\\\"60\\\\\\" viewBox=\\\\\\"0 0 60 60\\\\\\" xmlns=\\\\\\"http://www.w3.org/2000/svg\\\\\\"%3E%3Cg fill=\\\\\\"none\\\\\\" fill-rule=\\\\\\"evenodd\\\\\\"%3E%3Cg fill=\\\\\\"%23ffffff\\\\\\" fill-opacity=\\\\\\"0.05\\\\\\"%3E%3Ccircle cx=\\\\\\"30\\\\\\" cy=\\\\\\"30\\\\\\" r=\\\\\\"2\\\\\\"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")] opacity-20'
+                }
+              )
+            ] })
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
           "h2",
           {
             className: `text-3xl lg:text-4xl font-bold mb-4 ${isDarkMode ? "text-white" : "text-gray-900"}`,
-            children: [
-              t("timeline.header.title1") || "Những cột mốc",
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent", children: t("timeline.header.title2") || "Quan trọng" })
-            ]
+            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "block bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent", children: [
+              "📈 ",
+              sectionTitle
+            ] })
           }
         )
       ] }),
@@ -4688,17 +4684,23 @@ var __async = (__this, __arguments, generator) => {
       ] })
     ] });
   };
-  const PageChildrenSelectSection = ({ data, isDarkMode, section, imageBaseUrl = "" }) => {
+  const PageChildrenSelectSection = ({ data, isDarkMode, t, section, imageBaseUrl = "" }) => {
     var _a;
     const pages = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.map((item) => item.data).filter(Boolean)) || [];
     const sectionTitle = (section == null ? void 0 : section.title) || "";
     const sectionDescription = (section == null ? void 0 : section.description) || "";
+    const [visibleCount, setVisibleCount] = require$$0.useState(8);
+    const visiblePages = pages.slice(0, visibleCount);
+    const hasMore = visibleCount < pages.length;
     if (!pages || pages.length === 0) {
       return null;
     }
     const handleNavigate = (slug) => {
       window.location.href = slug;
     };
+    const handleLoadMore = () => {
+      setVisibleCount((prev) => prev + 8);
+    };
     const getImageUrl = (url) => {
       if (!url) return "";
       if (url.startsWith("http://") || url.startsWith("https://")) return url;
@@ -4733,8 +4735,9 @@ var __async = (__this, __arguments, generator) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
         display: "grid",
         gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
-        gap: "24px"
-      }, children: pages.map((page) => {
+        gap: "24px",
+        marginBottom: hasMore ? "40px" : "0"
+      }, children: visiblePages.map((page) => {
         const iconUrl = getImageUrl(page.icon);
         return /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "div",
@@ -4757,7 +4760,7 @@ var __async = (__this, __arguments, generator) => {
             onMouseEnter: (e) => {
               e.currentTarget.style.transform = "translateY(-8px)";
               e.currentTarget.style.boxShadow = isDarkMode ? "0 20px 25px -5px rgba(0, 0, 0, 0.5)" : "0 20px 25px -5px rgba(0, 0, 0, 0.15)";
-              e.currentTarget.style.borderColor = isDarkMode ? "#f97316" : "#f97316";
+              e.currentTarget.style.borderColor = "#1638f9ff";
             },
             onMouseLeave: (e) => {
               e.currentTarget.style.transform = "translateY(0)";
@@ -4794,19 +4797,59 @@ var __async = (__this, __arguments, generator) => {
           },
           page.id
         );
-      }) })
+      }) }),
+      hasMore && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "button",
+        {
+          onClick: handleLoadMore,
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "8px",
+            padding: "14px 32px",
+            fontSize: "16px",
+            fontWeight: "600",
+            color: "#fff",
+            backgroundColor: "#f97316",
+            border: "none",
+            borderRadius: "9999px",
+            cursor: "pointer",
+            transition: "all 0.3s",
+            boxShadow: "0 4px 6px -1px rgba(249, 115, 22, 0.3)"
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = "#ea580c";
+            e.currentTarget.style.transform = "translateY(-2px)";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = "#f97316";
+            e.currentTarget.style.transform = "translateY(0)";
+          },
+          children: [
+            t("pageChildrenSelect.moreInsights"),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowRight, { size: 18 })
+          ]
+        }
+      ) })
     ] }) });
   };
-  const PageChildrenSelectSection1 = ({ data, isDarkMode, section, imageBaseUrl = "" }) => {
+  const PageChildrenSelectSection1 = ({ data, isDarkMode, t, section, imageBaseUrl = "" }) => {
     var _a;
     const pages = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.map((item) => item.data).filter(Boolean)) || [];
     const sectionTitle = (section == null ? void 0 : section.title) || "";
+    const [visibleCount, setVisibleCount] = require$$0.useState(5);
+    const visiblePages = pages.slice(0, visibleCount);
+    const hasMore = visibleCount < pages.length;
     if (!pages || pages.length === 0) {
       return null;
     }
     const handleNavigate = (slug) => {
       window.location.href = slug;
     };
+    const handleLoadMore = () => {
+      setVisibleCount((prev) => prev + 5);
+    };
     const getImageUrl = (url) => {
       if (!url) return "";
       if (url.startsWith("http://") || url.startsWith("https://")) return url;
@@ -4832,7 +4875,7 @@ var __async = (__this, __arguments, generator) => {
         display: "flex",
         flexDirection: "column",
         gap: "24px"
-      }, children: pages.map((page) => {
+      }, children: visiblePages.map((page) => {
         var _a2, _b;
         const mainImage = ((_b = (_a2 = page.pageImages) == null ? void 0 : _a2.find((img) => img.isMain)) == null ? void 0 : _b.url) || page.icon;
         const imageUrl = getImageUrl(mainImage);
@@ -4922,226 +4965,44 @@ var __async = (__this, __arguments, generator) => {
           },
           page.id
         );
-      }) })
-    ] }) });
-  };
-  const warn = (i18n, code, msg, rest) => {
-    var _a, _b, _c, _d;
-    const args = [msg, __spreadValues({
-      code
-    }, rest || {})];
-    if ((_b = (_a = i18n == null ? void 0 : i18n.services) == null ? void 0 : _a.logger) == null ? void 0 : _b.forward) {
-      return i18n.services.logger.forward(args, "warn", "react-i18next::", true);
-    }
-    if (isString(args[0])) args[0] = `react-i18next:: ${args[0]}`;
-    if ((_d = (_c = i18n == null ? void 0 : i18n.services) == null ? void 0 : _c.logger) == null ? void 0 : _d.warn) {
-      i18n.services.logger.warn(...args);
-    } else if (console == null ? void 0 : console.warn) {
-      console.warn(...args);
-    }
-  };
-  const alreadyWarned = {};
-  const warnOnce = (i18n, code, msg, rest) => {
-    if (isString(msg) && alreadyWarned[msg]) return;
-    if (isString(msg)) alreadyWarned[msg] = /* @__PURE__ */ new Date();
-    warn(i18n, code, msg, rest);
-  };
-  const loadedClb = (i18n, cb) => () => {
-    if (i18n.isInitialized) {
-      cb();
-    } else {
-      const initialized = () => {
-        setTimeout(() => {
-          i18n.off("initialized", initialized);
-        }, 0);
-        cb();
-      };
-      i18n.on("initialized", initialized);
-    }
-  };
-  const loadNamespaces = (i18n, ns, cb) => {
-    i18n.loadNamespaces(ns, loadedClb(i18n, cb));
-  };
-  const loadLanguages = (i18n, lng, ns, cb) => {
-    if (isString(ns)) ns = [ns];
-    if (i18n.options.preload && i18n.options.preload.indexOf(lng) > -1) return loadNamespaces(i18n, ns, cb);
-    ns.forEach((n) => {
-      if (i18n.options.ns.indexOf(n) < 0) i18n.options.ns.push(n);
-    });
-    i18n.loadLanguages(lng, loadedClb(i18n, cb));
-  };
-  const hasLoadedNamespace = (ns, i18n, options = {}) => {
-    if (!i18n.languages || !i18n.languages.length) {
-      warnOnce(i18n, "NO_LANGUAGES", "i18n.languages were undefined or empty", {
-        languages: i18n.languages
-      });
-      return true;
-    }
-    return i18n.hasLoadedNamespace(ns, {
-      lng: options.lng,
-      precheck: (i18nInstance2, loadNotPending) => {
-        if (options.bindI18n && options.bindI18n.indexOf("languageChanging") > -1 && i18nInstance2.services.backendConnector.backend && i18nInstance2.isLanguageChangingTo && !loadNotPending(i18nInstance2.isLanguageChangingTo, ns)) return false;
-      }
-    });
-  };
-  const isString = (obj) => typeof obj === "string";
-  const isObject = (obj) => typeof obj === "object" && obj !== null;
-  const matchHtmlEntity = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34|nbsp|#160|copy|#169|reg|#174|hellip|#8230|#x2F|#47);/g;
-  const htmlEntities = {
-    "&amp;": "&",
-    "&#38;": "&",
-    "&lt;": "<",
-    "&#60;": "<",
-    "&gt;": ">",
-    "&#62;": ">",
-    "&apos;": "'",
-    "&#39;": "'",
-    "&quot;": '"',
-    "&#34;": '"',
-    "&nbsp;": " ",
-    "&#160;": " ",
-    "&copy;": "©",
-    "&#169;": "©",
-    "&reg;": "®",
-    "&#174;": "®",
-    "&hellip;": "…",
-    "&#8230;": "…",
-    "&#x2F;": "/",
-    "&#47;": "/"
-  };
-  const unescapeHtmlEntity = (m) => htmlEntities[m];
-  const unescape = (text) => text.replace(matchHtmlEntity, unescapeHtmlEntity);
-  let defaultOptions = {
-    bindI18n: "languageChanged",
-    bindI18nStore: "",
-    transEmptyNodeValue: "",
-    transSupportBasicHtmlNodes: true,
-    transWrapTextNodes: "",
-    transKeepBasicHtmlNodesFor: ["br", "strong", "i", "p"],
-    useSuspense: true,
-    unescape
-  };
-  const getDefaults = () => defaultOptions;
-  let i18nInstance;
-  const getI18n = () => i18nInstance;
-  const I18nContext = require$$0.createContext();
-  class ReportNamespaces {
-    constructor() {
-      this.usedNamespaces = {};
-    }
-    addUsedNamespaces(namespaces) {
-      namespaces.forEach((ns) => {
-        if (!this.usedNamespaces[ns]) this.usedNamespaces[ns] = true;
-      });
-    }
-    getUsedNamespaces() {
-      return Object.keys(this.usedNamespaces);
-    }
-  }
-  const usePrevious = (value, ignore) => {
-    const ref = require$$0.useRef();
-    require$$0.useEffect(() => {
-      ref.current = value;
-    }, [value, ignore]);
-    return ref.current;
-  };
-  const alwaysNewT = (i18n, language, namespace, keyPrefix) => i18n.getFixedT(language, namespace, keyPrefix);
-  const useMemoizedT = (i18n, language, namespace, keyPrefix) => require$$0.useCallback(alwaysNewT(i18n, language, namespace, keyPrefix), [i18n, language, namespace, keyPrefix]);
-  const useTranslation = (ns, props = {}) => {
-    var _a, _b, _c, _d;
-    const {
-      i18n: i18nFromProps
-    } = props;
-    const {
-      i18n: i18nFromContext,
-      defaultNS: defaultNSFromContext
-    } = require$$0.useContext(I18nContext) || {};
-    const i18n = i18nFromProps || i18nFromContext || getI18n();
-    if (i18n && !i18n.reportNamespaces) i18n.reportNamespaces = new ReportNamespaces();
-    if (!i18n) {
-      warnOnce(i18n, "NO_I18NEXT_INSTANCE", "useTranslation: You will need to pass in an i18next instance by using initReactI18next");
-      const notReadyT = (k, optsOrDefaultValue) => {
-        if (isString(optsOrDefaultValue)) return optsOrDefaultValue;
-        if (isObject(optsOrDefaultValue) && isString(optsOrDefaultValue.defaultValue)) return optsOrDefaultValue.defaultValue;
-        return Array.isArray(k) ? k[k.length - 1] : k;
-      };
-      const retNotReady = [notReadyT, {}, false];
-      retNotReady.t = notReadyT;
-      retNotReady.i18n = {};
-      retNotReady.ready = false;
-      return retNotReady;
-    }
-    if ((_a = i18n.options.react) == null ? void 0 : _a.wait) warnOnce(i18n, "DEPRECATED_OPTION", "useTranslation: It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.");
-    const i18nOptions = __spreadValues(__spreadValues(__spreadValues({}, getDefaults()), i18n.options.react), props);
-    const {
-      useSuspense,
-      keyPrefix
-    } = i18nOptions;
-    let namespaces = defaultNSFromContext || ((_b = i18n.options) == null ? void 0 : _b.defaultNS);
-    namespaces = isString(namespaces) ? [namespaces] : namespaces || ["translation"];
-    (_d = (_c = i18n.reportNamespaces).addUsedNamespaces) == null ? void 0 : _d.call(_c, namespaces);
-    const ready = (i18n.isInitialized || i18n.initializedStoreOnce) && namespaces.every((n) => hasLoadedNamespace(n, i18n, i18nOptions));
-    const memoGetT = useMemoizedT(i18n, props.lng || null, i18nOptions.nsMode === "fallback" ? namespaces : namespaces[0], keyPrefix);
-    const getT = () => memoGetT;
-    const getNewT = () => alwaysNewT(i18n, props.lng || null, i18nOptions.nsMode === "fallback" ? namespaces : namespaces[0], keyPrefix);
-    const [t, setT] = require$$0.useState(getT);
-    let joinedNS = namespaces.join();
-    if (props.lng) joinedNS = `${props.lng}${joinedNS}`;
-    const previousJoinedNS = usePrevious(joinedNS);
-    const isMounted = require$$0.useRef(true);
-    require$$0.useEffect(() => {
-      const {
-        bindI18n,
-        bindI18nStore
-      } = i18nOptions;
-      isMounted.current = true;
-      if (!ready && !useSuspense) {
-        if (props.lng) {
-          loadLanguages(i18n, props.lng, namespaces, () => {
-            if (isMounted.current) setT(getNewT);
-          });
-        } else {
-          loadNamespaces(i18n, namespaces, () => {
-            if (isMounted.current) setT(getNewT);
-          });
+      }) }),
+      hasMore && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { display: "flex", justifyContent: "center", marginTop: "40px" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "button",
+        {
+          onClick: handleLoadMore,
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "8px",
+            padding: "12px 28px",
+            fontSize: "16px",
+            fontWeight: "600",
+            color: "#fff",
+            backgroundColor: "#2563eb",
+            border: "none",
+            borderRadius: "9999px",
+            cursor: "pointer",
+            transition: "all 0.3s",
+            boxShadow: "0 4px 6px -1px rgba(37, 99, 235, 0.3)"
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = "#1d4ed8";
+            e.currentTarget.style.transform = "translateY(-2px)";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = "#2563eb";
+            e.currentTarget.style.transform = "translateY(0)";
+          },
+          children: [
+            t("pageChildrenSelect.moreInsights"),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowRight, { size: 18 })
+          ]
         }
-      }
-      if (ready && previousJoinedNS && previousJoinedNS !== joinedNS && isMounted.current) {
-        setT(getNewT);
-      }
-      const boundReset = () => {
-        if (isMounted.current) setT(getNewT);
-      };
-      if (bindI18n) i18n == null ? void 0 : i18n.on(bindI18n, boundReset);
-      if (bindI18nStore) i18n == null ? void 0 : i18n.store.on(bindI18nStore, boundReset);
-      return () => {
-        isMounted.current = false;
-        if (i18n && bindI18n) bindI18n == null ? void 0 : bindI18n.split(" ").forEach((e) => i18n.off(e, boundReset));
-        if (bindI18nStore && i18n) bindI18nStore.split(" ").forEach((e) => i18n.store.off(e, boundReset));
-      };
-    }, [i18n, joinedNS]);
-    require$$0.useEffect(() => {
-      if (isMounted.current && ready) {
-        setT(getT);
-      }
-    }, [i18n, keyPrefix, ready]);
-    const ret = [t, i18n, ready];
-    ret.t = t;
-    ret.i18n = i18n;
-    ret.ready = ready;
-    if (ready) return ret;
-    if (!ready && !useSuspense) return ret;
-    throw new Promise((resolve) => {
-      if (props.lng) {
-        loadLanguages(i18n, props.lng, namespaces, () => resolve());
-      } else {
-        loadNamespaces(i18n, namespaces, () => resolve());
-      }
-    });
+      ) })
+    ] }) });
   };
-  const PageChildrenSelectSection2 = ({ data, isDarkMode, section, imageBaseUrl = "" }) => {
+  const PageChildrenSelectSection2 = ({ data, isDarkMode, t, section, imageBaseUrl = "" }) => {
     var _a;
-    const { t } = useTranslation();
     const pages = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.map((item) => item.data).filter(Boolean)) || [];
     const sectionTitle = (section == null ? void 0 : section.title) || "";
     const [visibleCount, setVisibleCount] = require$$0.useState(6);