@thairath/tr-design-system 0.2.8 → 0.2.10

package/dist/index.cjs

@@ -6171,7 +6171,8 @@ var TRO_FooterItemGroup = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "
 // footer.tsx
 var TROFooter = _ref => {
   var {
-    dataFile = '/data/menu.json'
+    dataFile = '/data/menu.json',
+    loading
   } = _ref;
   var [data, setData] = React.useState(null);
   var [error, setError] = React.useState(false);
@@ -6181,7 +6182,7 @@ var TROFooter = _ref => {
       setError(true);
     });
   }, []);
-  if (!data) return /*#__PURE__*/React.createElement("div", null, "Loading...");
+  if (!data) return /*#__PURE__*/React.createElement("div", null, loading);
   var firstMenu = data && data.naviMenu && data.naviMenu[0] || undefined;
   var sportsMenu = data.naviMenu[5];
   var shopping = data.naviMenu[10];
@@ -6653,14 +6654,18 @@ var TROENHeader = _ref => {
     return () => window.removeEventListener('scroll', handleScroll);
   }, [isMobileView]);
   if (!data) return /*#__PURE__*/React.createElement("div", null, loading);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TROEN_Header, null, /*#__PURE__*/React.createElement(TROEN_HeaderTOP, null, /*#__PURE__*/React.createElement(TROEN_WrapIcon, null, /*#__PURE__*/React.createElement(Logo, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TROEN_Header, {
+    className: "troen--header"
+  }, /*#__PURE__*/React.createElement(TROEN_HeaderTOP, null, /*#__PURE__*/React.createElement(TROEN_WrapIcon, null, /*#__PURE__*/React.createElement(Logo, {
     fill: logoColor,
     mode: "auto-width",
     name: "tr_online_en",
     size: "24"
   })), isMobileView && /*#__PURE__*/React.createElement(HamburgerButton, {
     onClick: () => setIsOpen(!isOpen)
-  }))), /*#__PURE__*/React.createElement(TROEN_NavigatorBar, null, !isMobileView && /*#__PURE__*/React.createElement(TROEN_WrapIcon, {
+  }))), /*#__PURE__*/React.createElement(TROEN_NavigatorBar, {
+    className: "troen--navigator-bar"
+  }, !isMobileView && /*#__PURE__*/React.createElement(TROEN_WrapIcon, {
     className: "hide ".concat(showStickyLogo ? 'show' : '')
   }, /*#__PURE__*/React.createElement(Logo, {
     fill: "Color",
@@ -6680,8 +6685,11 @@ var TROENHeader = _ref => {
     isOpen: isOpen,
     onClick: () => setIsOpen(false)
   }), /*#__PURE__*/React.createElement(TROEN_SlideNavigatore, {
-    isOpen: isOpen
-  }, /*#__PURE__*/React.createElement(TROEN_SlidebarTop, null, /*#__PURE__*/React.createElement(TROEN_WrapIcon, {
+    isOpen: isOpen,
+    className: "troen--slide-navigator"
+  }, /*#__PURE__*/React.createElement(TROEN_SlidebarTop, {
+    className: "troen--slide-bar-top"
+  }, /*#__PURE__*/React.createElement(TROEN_WrapIcon, {
     onClick: () => setIsOpen(false)
   }, /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -6755,7 +6763,8 @@ var TROENHeader = _ref => {
     d: "M11.6342 20.1378C11.8461 20.1378 12.0788 19.9753 12.1513 19.778L12.5109 18.7919C12.5834 18.5933 12.4691 18.4308 12.2572 18.4308H11.8893C11.6774 18.4308 11.5631 18.2683 11.6356 18.0697L13.8754 11.9697C13.9479 11.7711 14.1472 11.5072 14.3187 11.3822L14.465 11.2753C14.6364 11.1503 14.9487 11.0489 15.1619 11.0489H16.5195C16.7313 11.0489 16.9975 11.1947 17.1118 11.3725L17.332 11.7169C17.4463 11.8947 17.6791 11.9392 17.8505 11.8142L19.4269 10.6628C19.5984 10.5378 19.6444 10.2905 19.5315 10.1114L18.8847 9.09888C18.7704 8.9211 18.5042 8.77527 18.2924 8.77527H13.7068C13.4949 8.77527 13.1813 8.87805 13.0113 9.00305L11.3039 10.253C11.1324 10.378 10.9345 10.6433 10.862 10.8405L8.20964 18.0697C8.13716 18.2683 7.9044 18.4308 7.69254 18.4308H7.12108C7.06812 18.4308 7.01376 18.4405 6.96079 18.46C6.8019 18.5141 6.65695 18.6433 6.60259 18.7919L6.24299 19.778C6.17051 19.9766 6.2848 20.1391 6.49666 20.1391H11.6342V20.1378Z",
     fill: "white"
   })))), /*#__PURE__*/React.createElement(TROEN_SlidebarContainer, {
-    onClick: () => setIsOpen(false)
+    onClick: () => setIsOpen(false),
+    className: "troen--slide-container"
   }, /*#__PURE__*/React.createElement(SlidebarNavLink, {
     href: "/",
     label: "Home"
@@ -6763,7 +6772,9 @@ var TROENHeader = _ref => {
     key: index,
     href: item.link,
     label: item.catergory
-  }))), /*#__PURE__*/React.createElement(TROEN_SlidebarNavOther, null, /*#__PURE__*/React.createElement("h3", null, "Thairath Website"), /*#__PURE__*/React.createElement("ul", {
+  }))), /*#__PURE__*/React.createElement(TROEN_SlidebarNavOther, {
+    className: "troen--slide-nav-other"
+  }, /*#__PURE__*/React.createElement("h3", null, "Thairath Website"), /*#__PURE__*/React.createElement("ul", {
     className: "troen--slidebar-website-menu"
   }, data.thairathWebsite.map((item, index) => /*#__PURE__*/React.createElement("li", {
     key: index
@@ -6781,7 +6792,9 @@ var TROENHeader = _ref => {
     target: "_blank",
     rel: "noopener noreferrer",
     onClick: () => setIsOpen(false)
-  }, item.name))))), /*#__PURE__*/React.createElement(TROEN_SlidebarNavOther, null, /*#__PURE__*/React.createElement("ul", {
+  }, item.name))))), /*#__PURE__*/React.createElement(TROEN_SlidebarNavOther, {
+    className: "troen--slide-nav-other"
+  }, /*#__PURE__*/React.createElement("ul", {
     className: "troen--slidebar-website-menu"
   }, data.otherLinks.map((item, index) => /*#__PURE__*/React.createElement("li", {
     key: index
@@ -6865,10 +6878,10 @@ var TRO_FooterBottom = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "pro
 // src/components/organisms/FooterEN/footerEN.tsx
 var TROENFooter = _ref => {
   var {
-    dataFile = '/data/menuEN.json'
+    dataFile = '/data/menuEN.json',
+    loading
   } = _ref;
   var [data, setData] = React.useState(null);
-  var [error, setError] = React.useState(false);
   React.useEffect(() => {
     var controller = new AbortController();
     fetch(dataFile, {
@@ -6878,15 +6891,21 @@ var TROENFooter = _ref => {
     });
     return () => controller.abort();
   }, [dataFile]);
-  if (!data) return /*#__PURE__*/React.createElement("div", null, "Loading...");
-  return /*#__PURE__*/React.createElement(TRO_FooterWrap, null, /*#__PURE__*/React.createElement(TRO_FooterTop, null, /*#__PURE__*/React.createElement(Logo, {
+  if (!data) return /*#__PURE__*/React.createElement("div", null, loading);
+  return /*#__PURE__*/React.createElement(TRO_FooterWrap, {
+    className: "troen--footer"
+  }, /*#__PURE__*/React.createElement(TRO_FooterTop, null, /*#__PURE__*/React.createElement(Logo, {
     fill: "Color",
     mode: "auto-width",
     name: "tr_online_en",
     size: "30"
-  })), /*#__PURE__*/React.createElement(TRO_FooterContainer, null, /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement(TRO_FooterContainer, {
+    className: "troen--footer-container"
+  }, /*#__PURE__*/React.createElement("div", {
     className: "troen--footer-wrap-main-manu"
-  }, /*#__PURE__*/React.createElement(TRO_FooterMenu, null, /*#__PURE__*/React.createElement("h3", null, "Sections"), /*#__PURE__*/React.createElement("ul", {
+  }, /*#__PURE__*/React.createElement(TRO_FooterMenu, {
+    className: "troen--footer-menu"
+  }, /*#__PURE__*/React.createElement("h3", null, "Sections"), /*#__PURE__*/React.createElement("ul", {
     className: "troen--footer-menu"
   }, data.naviMenu.map((item, index) => /*#__PURE__*/React.createElement("li", {
     key: index
@@ -6894,7 +6913,9 @@ var TROENFooter = _ref => {
     href: item.link,
     target: "_blank",
     rel: "noopener noreferrer"
-  }, item.catergory))))), /*#__PURE__*/React.createElement(TRO_FooterMenu, null, /*#__PURE__*/React.createElement("h3", null, "Thairath Website"), /*#__PURE__*/React.createElement("ul", {
+  }, item.catergory))))), /*#__PURE__*/React.createElement(TRO_FooterMenu, {
+    className: "troen--footer-menu"
+  }, /*#__PURE__*/React.createElement("h3", null, "Thairath Website"), /*#__PURE__*/React.createElement("ul", {
     className: "troen--footer-menu"
   }, data.thairathWebsite.map((item, index) => /*#__PURE__*/React.createElement("li", {
     key: index
@@ -6902,7 +6923,9 @@ var TROENFooter = _ref => {
     href: item.link,
     target: "_blank",
     rel: "noopener noreferrer"
-  }, item.name)))))), /*#__PURE__*/React.createElement(TRO_FooterMenu, null, /*#__PURE__*/React.createElement("h3", null, "Follow Us"), /*#__PURE__*/React.createElement("ul", {
+  }, item.name)))))), /*#__PURE__*/React.createElement(TRO_FooterMenu, {
+    className: "troen--footer-menu"
+  }, /*#__PURE__*/React.createElement("h3", null, "Follow Us"), /*#__PURE__*/React.createElement("ul", {
     className: "troen--footer-menu-followus"
   }, data.social.map((item, index) => /*#__PURE__*/React.createElement("li", {
     key: index
@@ -6933,7 +6956,9 @@ var TROENFooter = _ref => {
   }, /*#__PURE__*/React.createElement(Icon, {
     name: "desktop",
     size: 26
-  }))))), /*#__PURE__*/React.createElement(TRO_FooterMenu, null, /*#__PURE__*/React.createElement("div", {
+  }))))), /*#__PURE__*/React.createElement(TRO_FooterMenu, {
+    className: "troen--footer-menu"
+  }, /*#__PURE__*/React.createElement("div", {
     className: "trorn--footer-myapp"
   }, /*#__PURE__*/React.createElement("i", null, /*#__PURE__*/React.createElement(Icon, {
     fill: "#00B400",
@@ -6997,7 +7022,9 @@ var TROENFooter = _ref => {
     mode: "auto-width",
     name: "inet",
     size: "24"
-  })))))), /*#__PURE__*/React.createElement(TRO_FooterBottom, null, /*#__PURE__*/React.createElement("ul", {
+  })))))), /*#__PURE__*/React.createElement(TRO_FooterBottom, {
+    className: "troen--footer-bottom"
+  }, /*#__PURE__*/React.createElement("ul", {
     className: "troen--footer-website-menu"
   }, data.otherLinks.map((item, index) => /*#__PURE__*/React.createElement("li", {
     key: index
@@ -8030,6 +8057,7 @@ exports.TROENHeader = TROENHeader;
 exports.TROFooter = TROFooter;
 exports.TROHeader = TROHeader;
 exports.TROLThemeProvider = TROLThemeProvider;
+exports.Text = Text;
 exports.Textarea = Textarea;
 exports.Textbox = Textbox;
 exports.add_circle = AddCircleIcon;
@@ -8110,7 +8138,6 @@ exports.share = ShareIcon;
 exports.share_filled = ShareFilledIcon;
 exports.social_x = SocilaXIcon;
 exports.sonp = SOPNLogo;
-exports.text = Text;
 exports.thumbmail = Thumbnail;
 exports.tiktok = TiktokIcon;
 exports.tiktok_color = TiktokColorIcon;