nvis-fe-cms-libs 2.1.0 → 2.1.2

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

@@ -4808,6 +4808,133 @@ const PageChildrenSelectSection2 = ({ data, isDarkMode, t, section, imageBaseUrl
     ) })
   ] }) });
 };
+const HeroBannerSection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
+  var _a, _b;
+  const [activeSlide, setActiveSlide] = 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)
+  }))) || [];
+  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(
+          "h1",
+          {
+            className: "text-4xl sm:text-5xl lg:text-6xl font-black leading-tight mb-6",
+            style: {
+              color: isDarkMode ? "#F8FAFC" : "#1E3888"
+            },
+            children: 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,
@@ -4831,7 +4958,8 @@ const index = {
   PageHighlightSection,
   PageChildrenSelectSection,
   PageChildrenSelectSection1,
-  PageChildrenSelectSection2
+  PageChildrenSelectSection2,
+  HeroBannerSection
 };
 export {
   AboutCompanySection,
@@ -4843,6 +4971,7 @@ export {
   DiagramSection,
   DiagramSection2,
   FaqSection,
+  HeroBannerSection,
   MilestoneSection,
   PageChildrenSelectSection,
   PageChildrenSelectSection1,