nvis-fe-cms-libs 2.1.5 → 2.1.7

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

@@ -844,7 +844,7 @@ const PartnerCard = ({ partner, idx, t, getLogoUrl, isDarkMode }) => {
     }
   );
 };
-function useWindowSize$1() {
+function useWindowSize$3() {
   const [width, setWidth] = useState(
     typeof window !== "undefined" ? window.innerWidth : 1200
   );
@@ -856,13 +856,13 @@ function useWindowSize$1() {
   }, []);
   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] = useState(0);
   const [partnersVisible, setPartnersVisible] = useState(false);
   const partnersRef = 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;
@@ -948,6 +948,189 @@ const PartnersSection = ({ data, t, imageBaseUrl = "", section }) => {
     ) })
   ] }) });
 };
+const PartnerCard_2 = ({ partner, idx, t, getLogoUrl, isDarkMode }) => {
+  const itemRef = useRef(null);
+  const [visible, setVisible] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  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] = useState(
+    typeof window !== "undefined" ? window.innerWidth : 1200
+  );
+  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] = useState(0);
+  const [partnersVisible, setPartnersVisible] = useState(false);
+  const partnersRef = 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 = 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]);
+  useEffect(() => {
+    if (partners.length > 1) {
+      const interval = setInterval(() => {
+        setCurrentPartnerSlide((prev) => (prev + 1) % partners.length);
+      }, 5e3);
+      return () => clearInterval(interval);
+    }
+  }, [partners.length]);
+  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] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -1121,7 +1304,7 @@ const TestimonialsSection = ({ data, t, section }) => {
     ] })
   ] }) });
 };
-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",
@@ -1201,7 +1384,7 @@ const PartnerListCard = ({ partner, idx, t, isDarkMode, getLogoUrl }) => {
     }
   );
 };
-function useWindowSize() {
+function useWindowSize$1() {
   const [width, setWidth] = useState(
     typeof window !== "undefined" ? window.innerWidth : 1200
   );
@@ -1213,6 +1396,230 @@ function useWindowSize() {
   return width;
 }
 const PartnerListSection = ({ t, getPartnerList, imageBaseUrl = "", section }) => {
+  const [partnersData, setPartnersData] = useState([]);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [currentPartnerSlide, setCurrentPartnerSlide] = useState(0);
+  const [partnersVisible, setPartnersVisible] = useState(false);
+  const partnersRef = 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}`;
+  };
+  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 = 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]);
+  useEffect(() => {
+    if (partners.length > 1) {
+      const interval = setInterval(() => {
+        setCurrentPartnerSlide((prev) => (prev + 1) % partners.length);
+      }, 5e3);
+      return () => clearInterval(interval);
+    }
+  }, [partners.length]);
+  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] = useState(
+    typeof window !== "undefined" ? window.innerWidth : 1200
+  );
+  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] = useState([]);
   const [error, setError] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -4941,10 +5348,12 @@ const index = {
   CompanyValues,
   TimelineSection,
   PartnerCard,
-  PartnersSection,
+  PartnersSection: PartnersSection$1,
+  PartnersSection_2: PartnersSection,
   MilestoneSection,
   TestimonialsSection,
-  PartnerListCard,
+  PartnerListCard: PartnerListCard$1,
+  PartnerListSection_2,
   PartnerListSection,
   ContactFormSection,
   ContactInfoSection,
@@ -4979,9 +5388,11 @@ export {
   PageChildrenSelectSection2,
   PageHighlightSection,
   PartnerCard,
-  PartnerListCard,
+  PartnerListCard$1 as PartnerListCard,
   PartnerListSection,
-  PartnersSection,
+  PartnerListSection_2,
+  PartnersSection$1 as PartnersSection,
+  PartnersSection as PartnersSection_2,
   ProductListSection,
   TestimonialsSection,
   TextSection,