nvis-fe-cms-libs 1.1.23 → 1.1.25

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

@@ -49,7 +49,7 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import require$$0, { useRef, useState, useEffect, useMemo, forwardRef, createElement, createContext, useContext, useCallback } from "react";
+import require$$0, { useRef, useState, useEffect, useMemo, forwardRef, createElement } from "react";
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production = {};
 /**
@@ -662,7 +662,7 @@ const TimelineSection = ({ data, t, isDarkMode, section }) => {
   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] = useState([]);
   const timelineRefs = useRef([]);
-  const sectionTitle = (section == null ? void 0 : section.title) || "";
+  const sectionTitle = (section == null ? void 0 : section.title) || "...";
   useEffect(() => {
     setTimelineVisible(new Array(timelineData.length).fill(false));
   }, [timelineData.length]);
@@ -698,53 +698,49 @@ const TimelineSection = ({ data, t, isDarkMode, section }) => {
   }
   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
+          ] })
         }
       )
     ] }),
@@ -4685,17 +4681,23 @@ const PageHighlightSection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
     ] })
   ] });
 };
-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] = 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;
@@ -4730,8 +4732,9 @@ const PageChildrenSelectSection = ({ data, isDarkMode, section, imageBaseUrl = "
     /* @__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",
@@ -4754,7 +4757,7 @@ const PageChildrenSelectSection = ({ data, isDarkMode, section, imageBaseUrl = "
           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)";
@@ -4791,19 +4794,59 @@ const PageChildrenSelectSection = ({ data, isDarkMode, section, imageBaseUrl = "
         },
         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] = 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;
@@ -4829,7 +4872,7 @@ const PageChildrenSelectSection1 = ({ data, isDarkMode, section, imageBaseUrl =
       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);
@@ -4919,226 +4962,44 @@ const PageChildrenSelectSection1 = ({ data, isDarkMode, section, imageBaseUrl =
         },
         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 = 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 = useRef();
-  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) => 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
-  } = 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] = useState(getT);
-  let joinedNS = namespaces.join();
-  if (props.lng) joinedNS = `${props.lng}${joinedNS}`;
-  const previousJoinedNS = usePrevious(joinedNS);
-  const isMounted = useRef(true);
-  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]);
-  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] = useState(6);