nvis-fe-cms-libs 2.1.5 → 2.1.7

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

@@ -847,7 +847,7 @@ var __async = (__this, __arguments, generator) => {
       }
     );
   };
-  function useWindowSize$1() {
+  function useWindowSize$3() {
     const [width, setWidth] = require$$0.useState(
       typeof window !== "undefined" ? window.innerWidth : 1200
     );
@@ -859,13 +859,13 @@ var __async = (__this, __arguments, generator) => {
     }, []);
     return width;
   }
-  const PartnersSection = ({ data, t, imageBaseUrl = "", section }) => {
+  const PartnersSection$1 = ({ data, t, imageBaseUrl = "", section }) => {
     var _a, _b, _c;
     const partnersData = ((_c = (_b = (_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.filter((item) => item == null ? void 0 : item.data)) == null ? void 0 : _b.sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))) == null ? void 0 : _c.map((item) => item.data)) || [];
     const [currentPartnerSlide, setCurrentPartnerSlide] = require$$0.useState(0);
     const [partnersVisible, setPartnersVisible] = require$$0.useState(false);
     const partnersRef = require$$0.useRef(null);
-    const windowWidth = useWindowSize$1();
+    const windowWidth = useWindowSize$3();
     const sectionTitle = (section == null ? void 0 : section.title) || t("partners.sectionTitle") || "Đối tác";
     const getLogoUrl = (logoUrl) => {
       if (!logoUrl) return null;
@@ -951,6 +951,189 @@ var __async = (__this, __arguments, generator) => {
       ) })
     ] }) });
   };
+  const PartnerCard_2 = ({ partner, idx, t, getLogoUrl, isDarkMode }) => {
+    const itemRef = require$$0.useRef(null);
+    const [visible, setVisible] = require$$0.useState(false);
+    const [isHovered, setIsHovered] = require$$0.useState(false);
+    require$$0.useEffect(() => {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              setVisible(true);
+              observer.unobserve(entry.target);
+            }
+          });
+        },
+        { threshold: 0.2 }
+      );
+      if (itemRef.current) observer.observe(itemRef.current);
+      return () => itemRef.current && observer.unobserve(itemRef.current);
+    }, []);
+    const logoSrc = getLogoUrl(partner.logoUrl);
+    const cardContent = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      flex: 1
+    }, children: logoSrc ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
+      width: "100%",
+      height: "100px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "img",
+      {
+        src: logoSrc,
+        alt: partner.name || t("partners.logoAlt") || "Partner logo",
+        style: {
+          maxWidth: "100%",
+          maxHeight: "100%",
+          objectFit: "contain",
+          transform: isHovered ? "scale(1.05)" : "scale(1)",
+          transition: "transform 300ms cubic-bezier(0.4, 0, 0.2, 1)"
+        },
+        loading: "lazy"
+      }
+    ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-surface", style: {
+      width: "5rem",
+      height: "5rem",
+      borderRadius: "9999px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontSize: "1.875rem" }, children: "🤝" }) }) });
+    const baseClasses = `card transition-all duration-700 ease-out ${visible ? "opacity-100 scale-100" : "opacity-0 scale-75"}`;
+    const dynamicStyles = {
+      transitionDelay: `${idx * 150}ms`,
+      textDecoration: "none",
+      overflow: "hidden",
+      minHeight: "280px",
+      padding: "1.5rem",
+      display: "flex",
+      flexDirection: "column"
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "a",
+      {
+        ref: itemRef,
+        href: partner.websiteUrl || "#",
+        target: partner.websiteUrl ? "_blank" : "_self",
+        rel: partner.websiteUrl ? "noopener noreferrer" : "",
+        className: baseClasses,
+        style: dynamicStyles,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        children: cardContent
+      }
+    );
+  };
+  function useWindowSize$2() {
+    const [width, setWidth] = require$$0.useState(
+      typeof window !== "undefined" ? window.innerWidth : 1200
+    );
+    require$$0.useEffect(() => {
+      if (typeof window === "undefined") return;
+      const handleResize = () => setWidth(window.innerWidth);
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    return width;
+  }
+  const PartnersSection = ({ data, t, imageBaseUrl = "", section }) => {
+    var _a, _b, _c;
+    const partnersData = ((_c = (_b = (_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.filter((item) => item == null ? void 0 : item.data)) == null ? void 0 : _b.sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))) == null ? void 0 : _c.map((item) => item.data)) || [];
+    const [currentPartnerSlide, setCurrentPartnerSlide] = require$$0.useState(0);
+    const [partnersVisible, setPartnersVisible] = require$$0.useState(false);
+    const partnersRef = require$$0.useRef(null);
+    const windowWidth = useWindowSize$2();
+    const sectionTitle = (section == null ? void 0 : section.title) || t("partners.sectionTitle") || "Đối tác";
+    const getLogoUrl = (logoUrl) => {
+      if (!logoUrl) return null;
+      if (logoUrl.startsWith("http")) return logoUrl;
+      return `${imageBaseUrl}${logoUrl}`;
+    };
+    const partners = require$$0.useMemo(() => {
+      const getPerSlide = () => {
+        if (windowWidth < 640) return 2;
+        if (windowWidth < 1024) return 3;
+        return 4;
+      };
+      const grouped = [];
+      const perSlide = getPerSlide();
+      for (let i = 0; i < partnersData.length; i += perSlide) {
+        grouped.push(partnersData.slice(i, i + perSlide));
+      }
+      return grouped;
+    }, [partnersData, windowWidth]);
+    require$$0.useEffect(() => {
+      if (partners.length > 1) {
+        const interval = setInterval(() => {
+          setCurrentPartnerSlide((prev) => (prev + 1) % partners.length);
+        }, 5e3);
+        return () => clearInterval(interval);
+      }
+    }, [partners.length]);
+    require$$0.useEffect(() => {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              setPartnersVisible(true);
+              observer.unobserve(entry.target);
+            }
+          });
+        },
+        { threshold: 0.1 }
+      );
+      if (partnersRef.current) observer.observe(partnersRef.current);
+      return () => partnersRef.current && observer.unobserve(partnersRef.current);
+    }, []);
+    if (!partnersData.length) return null;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center mb-12", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline-block px-4 py-2 rounded-full border border-[var(--border-color)] bg-surface text-subtitle font-semibold text-brand-primary shadow-sm", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-partner", folder: "PartnersSection", className: "w-4 h-4 icon-gradient" }),
+        " ",
+        sectionTitle
+      ] }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: partnersRef, className: "relative overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: `transition-all duration-1000 ease-out ${partnersVisible ? "opacity-100 scale-100" : "opacity-0 scale-95"}`,
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative h-56 md:h-64 lg:h-72 xl:h-80 mb-8", children: partners.map((group, slideIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                className: `absolute inset-0 transition-all duration-1000 ease-in-out ${slideIndex === currentPartnerSlide ? "opacity-100 translate-x-0" : slideIndex < currentPartnerSlide ? "opacity-0 -translate-x-full" : "opacity-0 translate-x-full"}`,
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6 h-full px-2", children: group.map((partner, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  PartnerCard_2,
+                  {
+                    partner,
+                    idx,
+                    t,
+                    getLogoUrl
+                  },
+                  partner.id || idx
+                )) })
+              },
+              slideIndex
+            )) }),
+            partners.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-2", children: partners.map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                onClick: () => setCurrentPartnerSlide(index2),
+                className: `w-3 h-3 rounded-full transition-all duration-300 ${index2 === currentPartnerSlide ? "bg-brand-primary scale-125 shadow-lg" : "bg-surface hover:bg-brand-primary/70"}`,
+                "aria-label": `Slide ${index2 + 1}`
+              },
+              index2
+            )) })
+          ]
+        }
+      ) })
+    ] }) });
+  };
   const MilestoneSection = ({ data, t, isDarkMode, getMilestoneTimeline, section }) => {
     const [milestones, setMilestones] = require$$0.useState([]);
     const [loading, setLoading] = require$$0.useState(true);
@@ -1124,7 +1307,7 @@ var __async = (__this, __arguments, generator) => {
       ] })
     ] }) });
   };
-  const PartnerListCard = ({ partner, idx, t, isDarkMode, getLogoUrl }) => {
+  const PartnerListCard$1 = ({ partner, idx, t, isDarkMode, getLogoUrl }) => {
     const logoUrl = getLogoUrl(partner.logoUrl);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "a",
@@ -1204,7 +1387,7 @@ var __async = (__this, __arguments, generator) => {
       }
     );
   };
-  function useWindowSize() {
+  function useWindowSize$1() {
     const [width, setWidth] = require$$0.useState(
       typeof window !== "undefined" ? window.innerWidth : 1200
     );
@@ -1216,6 +1399,230 @@ var __async = (__this, __arguments, generator) => {
     return width;
   }
   const PartnerListSection = ({ t, getPartnerList, imageBaseUrl = "", section }) => {
+    const [partnersData, setPartnersData] = require$$0.useState([]);
+    const [error, setError] = require$$0.useState(null);
+    const [loading, setLoading] = require$$0.useState(true);
+    const [currentPartnerSlide, setCurrentPartnerSlide] = require$$0.useState(0);
+    const [partnersVisible, setPartnersVisible] = require$$0.useState(false);
+    const partnersRef = require$$0.useRef(null);
+    const windowWidth = useWindowSize$1();
+    const sectionTitle = (section == null ? void 0 : section.title) || t("partners.sectionTitle");
+    const getLogoUrl = (logoUrl) => {
+      if (!logoUrl) return null;
+      if (logoUrl.startsWith("http")) return logoUrl;
+      return `${imageBaseUrl}${logoUrl}`;
+    };
+    require$$0.useEffect(() => {
+      const fetchData = () => __async(null, null, function* () {
+        try {
+          const res = yield getPartnerList();
+          if (res.success) {
+            setPartnersData(res.data || []);
+          } else {
+            setError(res.error || "Error fetching partners");
+          }
+        } catch (err) {
+          setError(err.message);
+        } finally {
+          setLoading(false);
+        }
+      });
+      fetchData();
+    }, []);
+    const partners = require$$0.useMemo(() => {
+      const getPerSlide = () => {
+        if (windowWidth < 640) return 2;
+        if (windowWidth < 1024) return 3;
+        return 4;
+      };
+      const grouped = [];
+      const perSlide = getPerSlide();
+      for (let i = 0; i < partnersData.length; i += perSlide) {
+        grouped.push(partnersData.slice(i, i + perSlide));
+      }
+      return grouped;
+    }, [partnersData, windowWidth]);
+    require$$0.useEffect(() => {
+      if (partners.length > 1) {
+        const interval = setInterval(() => {
+          setCurrentPartnerSlide((prev) => (prev + 1) % partners.length);
+        }, 5e3);
+        return () => clearInterval(interval);
+      }
+    }, [partners.length]);
+    require$$0.useEffect(() => {
+      const fallbackTimer = setTimeout(() => setPartnersVisible(true), 500);
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              clearTimeout(fallbackTimer);
+              setPartnersVisible(true);
+              observer.unobserve(entry.target);
+            }
+          });
+        },
+        { threshold: 0.1, rootMargin: "50px" }
+      );
+      if (partnersRef.current) observer.observe(partnersRef.current);
+      else {
+        clearTimeout(fallbackTimer);
+        setPartnersVisible(true);
+      }
+      return () => {
+        clearTimeout(fallbackTimer);
+        if (partnersRef.current) observer.unobserve(partnersRef.current);
+      };
+    }, []);
+    if (loading) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 text-center bg-body", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-body text-muted", children: t("partners.loading") || "Đang tải danh sách đối tác..." }) });
+    }
+    if (error) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 text-center bg-body", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-body text-brand-secondary", children: t("partners.error") || error }) });
+    }
+    if (!partnersData.length) return null;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center mb-12", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline-block px-4 py-2 rounded-full border border-[var(--border-color)] bg-surface text-subtitle font-semibold text-brand-primary shadow-sm", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeIcon, { name: "icon-partner", folder: "PartnersSection", className: "w-4 h-4 icon-gradient" }),
+        " ",
+        sectionTitle
+      ] }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: partnersRef, className: "relative", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: `transition-all duration-1000 ease-out ${partnersVisible ? "opacity-100 scale-100" : "opacity-0 scale-95"}`,
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative overflow-hidden mb-12", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { minHeight: "320px" }, children: partners.map((group, slideIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                className: `absolute inset-0 w-full transition-all duration-1000 ease-in-out ${slideIndex === currentPartnerSlide ? "opacity-100 translate-x-0" : slideIndex < currentPartnerSlide ? "opacity-0 -translate-x-full" : "opacity-0 translate-x-full"}`,
+                style: {
+                  zIndex: slideIndex === currentPartnerSlide ? 10 : 1
+                },
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8 px-2", children: group.map((partner, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  PartnerListCard$1,
+                  {
+                    partner,
+                    idx,
+                    t,
+                    getLogoUrl
+                  },
+                  partner.id || `${slideIndex}-${idx}`
+                )) })
+              },
+              slideIndex
+            )) }) }),
+            partners.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center space-x-3", style: {
+              position: "relative",
+              zIndex: 100,
+              paddingTop: "1rem"
+            }, children: partners.map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                onClick: () => setCurrentPartnerSlide(index2),
+                style: {
+                  width: "12px",
+                  height: "12px",
+                  borderRadius: "50%",
+                  border: "none",
+                  cursor: "pointer",
+                  transition: "all 0.3s ease",
+                  backgroundColor: index2 === currentPartnerSlide ? "var(--brand-primary)" : "rgba(151, 151, 151, 0.8)",
+                  transform: index2 === currentPartnerSlide ? "scale(1.3)" : "scale(1)"
+                },
+                onMouseEnter: (e) => {
+                  if (index2 !== currentPartnerSlide) {
+                    e.currentTarget.style.backgroundColor = "rgba(151, 151, 151, 0.8)";
+                  }
+                },
+                onMouseLeave: (e) => {
+                  if (index2 !== currentPartnerSlide) {
+                    e.currentTarget.style.backgroundColor = "rgba(151, 151, 151, 0.8)";
+                  }
+                },
+                "aria-label": `Slide ${index2 + 1}`
+              },
+              index2
+            )) })
+          ]
+        }
+      ) })
+    ] }) });
+  };
+  const PartnerListCard = ({ partner, idx, t, isDarkMode, getLogoUrl }) => {
+    const logoUrl = getLogoUrl(partner.logoUrl);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "a",
+      {
+        href: partner.websiteUrl || "#",
+        target: partner.websiteUrl ? "_blank" : "_self",
+        rel: partner.websiteUrl ? "noopener noreferrer" : "",
+        className: "card",
+        style: {
+          animationDelay: `${idx * 0.1}s`,
+          textDecoration: "none",
+          overflow: "hidden",
+          minHeight: "280px",
+          padding: "1.5rem",
+          display: "flex",
+          flexDirection: "column"
+        },
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          flex: 1
+        }, children: logoUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
+          width: "100%",
+          height: "100px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          marginBottom: "1rem"
+        }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "img",
+          {
+            src: logoUrl,
+            alt: partner.name || t("partners.logoAlt") || "Partner logo",
+            style: {
+              maxWidth: "100%",
+              maxHeight: "100%",
+              objectFit: "contain",
+              transition: "transform 300ms cubic-bezier(0.4, 0, 0.2, 1)"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.transform = "scale(1.05)";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.transform = "scale(1)";
+            },
+            loading: "lazy"
+          }
+        ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-surface", style: {
+          width: "5rem",
+          height: "5rem",
+          borderRadius: "9999px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          marginBottom: "1rem"
+        }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontSize: "1.875rem" }, children: "🤝" }) }) })
+      }
+    );
+  };
+  function useWindowSize() {
+    const [width, setWidth] = require$$0.useState(
+      typeof window !== "undefined" ? window.innerWidth : 1200
+    );
+    require$$0.useEffect(() => {
+      const handleResize = () => setWidth(window.innerWidth);
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    return width;
+  }
+  const PartnerListSection_2 = ({ t, getPartnerList, imageBaseUrl = "", section }) => {
     const [partnersData, setPartnersData] = require$$0.useState([]);
     const [error, setError] = require$$0.useState(null);
     const [loading, setLoading] = require$$0.useState(true);
@@ -4944,10 +5351,12 @@ var __async = (__this, __arguments, generator) => {
     CompanyValues,
     TimelineSection,
     PartnerCard,
-    PartnersSection,
+    PartnersSection: PartnersSection$1,
+    PartnersSection_2: PartnersSection,
     MilestoneSection,
     TestimonialsSection,
-    PartnerListCard,
+    PartnerListCard: PartnerListCard$1,
+    PartnerListSection_2,
     PartnerListSection,
     ContactFormSection,
     ContactInfoSection,
@@ -4981,9 +5390,11 @@ var __async = (__this, __arguments, generator) => {
   exports2.PageChildrenSelectSection2 = PageChildrenSelectSection2;
   exports2.PageHighlightSection = PageHighlightSection;
   exports2.PartnerCard = PartnerCard;
-  exports2.PartnerListCard = PartnerListCard;
+  exports2.PartnerListCard = PartnerListCard$1;
   exports2.PartnerListSection = PartnerListSection;
-  exports2.PartnersSection = PartnersSection;
+  exports2.PartnerListSection_2 = PartnerListSection_2;
+  exports2.PartnersSection = PartnersSection$1;
+  exports2.PartnersSection_2 = PartnersSection;
   exports2.ProductListSection = ProductListSection;
   exports2.TestimonialsSection = TestimonialsSection;
   exports2.TextSection = TextSection;