nvis-fe-cms-libs 2.1.1 → 2.1.3

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

@@ -4811,6 +4811,133 @@ var __async = (__this, __arguments, generator) => {
       ) })
     ] }) });
   };
+  const HeroBannerSection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
+    var _a, _b;
+    const [activeSlide, setActiveSlide] = require$$0.useState(0);
+    const extractBannerData = (data2) => {
+      if (!(data2 == null ? void 0 : data2.sectionDataBindingItems) || data2.sectionDataBindingItems.length === 0) {
+        return null;
+      }
+      const item = data2.sectionDataBindingItems[0];
+      if (!item || !item.data) {
+        return null;
+      }
+      const bannerData2 = item.data;
+      if (!bannerData2.id && !bannerData2.name) {
+        return null;
+      }
+      const extractedData = {
+        id: bannerData2.id,
+        name: bannerData2.name || "",
+        description: bannerData2.description || "",
+        images: Array.isArray(bannerData2.images) ? bannerData2.images : []
+      };
+      return extractedData;
+    };
+    const bannerData = extractBannerData(data);
+    const getImageUrl = (imagePath) => {
+      if (!imagePath) {
+        return null;
+      }
+      if (imagePath.startsWith("http://") || imagePath.startsWith("https://")) {
+        return imagePath;
+      }
+      return `${imageBaseUrl}${imagePath}`;
+    };
+    const slideImages = ((_a = bannerData == null ? void 0 : bannerData.images) == null ? void 0 : _a.map((img) => ({
+      id: img.id || `img-${Math.random()}`,
+      url: getImageUrl(img.url)
+    }))) || [];
+    require$$0.useEffect(() => {
+      if (slideImages.length <= 1) return;
+      const interval = setInterval(() => {
+        setActiveSlide((prev) => (prev + 1) % slideImages.length);
+      }, 5e3);
+      return () => clearInterval(interval);
+    }, [slideImages.length]);
+    const defaultImage = "https://images.unsplash.com/photo-1566073771259-6a8506099945?w=1920&h=1080&fit=crop&q=80";
+    if (!bannerData) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 bg-body", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 text-center", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold mb-2 text-main", children: (t == null ? void 0 : t("banner.noData.title")) || "Chưa có dữ liệu" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted", children: (t == null ? void 0 : t("banner.noData.description")) || "Hiện tại chưa có banner nào được thiết lập." })
+      ] }) });
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionWrapper, { isDarkMode, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute inset-0 overflow-hidden pointer-events-none", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "absolute top-0 right-0 w-96 h-96 rounded-full opacity-20 blur-3xl",
+            style: {
+              background: isDarkMode ? "#1086CD" : "#1E3888"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "absolute bottom-0 left-0 w-96 h-96 rounded-full opacity-10 blur-3xl",
+            style: {
+              background: isDarkMode ? "#1E3888" : "#1086CD"
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative max-w-7xl mx-auto px-6 sm:px-8 lg:px-12", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col lg:flex-row items-center justify-between gap-8 lg:gap-12", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full lg:w-1/2 lg:pr-8 lg:self-start lg:pt-8", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: "leading-tight mb-6",
+              style: {
+                color: isDarkMode ? "#F8FAFC" : "#1E3888"
+              },
+              dangerouslySetInnerHTML: { __html: bannerData.name }
+            }
+          ),
+          bannerData.description && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: "text-lg sm:text-xl leading-relaxed mb-8",
+              style: {
+                color: isDarkMode ? "#CBD5E1" : "#475569"
+              },
+              dangerouslySetInnerHTML: { __html: bannerData.description }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full lg:w-1/2 relative py-4 md:py-4 lg:py-5", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative overflow-hidden shadow-2xl", style: { borderRadius: "48px 0 48px 0" }, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "img",
+            {
+              src: ((_b = slideImages[activeSlide]) == null ? void 0 : _b.url) || defaultImage,
+              alt: bannerData.name,
+              className: "w-full h-auto object-cover transition-all duration-1000",
+              style: {
+                aspectRatio: "4/3",
+                maxHeight: "500px"
+              },
+              onError: (e) => {
+                e.target.src = defaultImage;
+              }
+            }
+          ),
+          slideImages.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-4 right-4 flex gap-2", children: slideImages.map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              onClick: () => setActiveSlide(index2),
+              className: "w-2 h-2 rounded-full transition-all duration-300",
+              style: {
+                background: activeSlide === index2 ? "white" : "rgba(255, 255, 255, 0.5)",
+                width: activeSlide === index2 ? "24px" : "8px"
+              }
+            },
+            index2
+          )) })
+        ] }) })
+      ] }) })
+    ] });
+  };
   const index = {
     AboutCompanySection,
     CompanyValues,
@@ -4834,7 +4961,8 @@ var __async = (__this, __arguments, generator) => {
     PageHighlightSection,
     PageChildrenSelectSection,
     PageChildrenSelectSection1,
-    PageChildrenSelectSection2
+    PageChildrenSelectSection2,
+    HeroBannerSection
   };
   exports2.AboutCompanySection = AboutCompanySection;
   exports2.CompanyValues = CompanyValues;
@@ -4845,6 +4973,7 @@ var __async = (__this, __arguments, generator) => {
   exports2.DiagramSection = DiagramSection;
   exports2.DiagramSection2 = DiagramSection2;
   exports2.FaqSection = FaqSection;
+  exports2.HeroBannerSection = HeroBannerSection;
   exports2.MilestoneSection = MilestoneSection;
   exports2.PageChildrenSelectSection = PageChildrenSelectSection;
   exports2.PageChildrenSelectSection1 = PageChildrenSelectSection1;