ecomlab-components-next 0.1.104 → 0.1.105

package/dist/components/ArticleElements/LongTileArticleBox/LongTileArticleBox.js

@@ -0,0 +1,158 @@
+"use strict";
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _link = _interopRequireDefault(require("next/link"));
+var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
+var _time_icon = _interopRequireDefault(require("./img/time_icon.svg"));
+var _view_icon = _interopRequireDefault(require("./img/view_icon.svg"));
+var _calendar_icon = _interopRequireDefault(require("./img/calendar_icon.svg"));
+var _SliderCarousel = _interopRequireDefault(require("../../Slider/SliderCarousel/SliderCarousel"));
+var _utils = require("../../../common/utils");
+var _ShareComponent = require("../ShareComponent/ShareComponent");
+var _highlightWord = require("../../../common/highlightWord ");
+require("./LongTileArticleBox.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var LongTileArticleBox = function LongTileArticleBox(_ref) {
+  var _author$, _author$2;
+  var id = _ref.id,
+    name = _ref.name,
+    cpu = _ref.cpu,
+    author = _ref.author,
+    annotation = _ref.annotation,
+    photoPreview = _ref.photoPreview,
+    tags = _ref.tags,
+    date = _ref.date,
+    timeToRead = _ref.timeToRead,
+    views = _ref.views,
+    onLinkClick = _ref.onLinkClick,
+    _ref$activeLang = _ref.activeLang,
+    activeLang = _ref$activeLang === void 0 ? 'ru' : _ref$activeLang,
+    _ref$linkString = _ref.linkString,
+    linkString = _ref$linkString === void 0 ? false : _ref$linkString,
+    _ref$stopRedirect = _ref.stopRedirect,
+    stopRedirect = _ref$stopRedirect === void 0 ? false : _ref$stopRedirect,
+    _ref$search = _ref.search,
+    search = _ref$search === void 0 ? false : _ref$search,
+    _ref$pathBread = _ref.pathBread,
+    pathBread = _ref$pathBread === void 0 ? '' : _ref$pathBread,
+    _ref$wiki = _ref.wiki,
+    wiki = _ref$wiki === void 0 ? false : _ref$wiki,
+    portalId = _ref.portalId,
+    _ref$wikiStyle = _ref.wikiStyle,
+    wikiStyle = _ref$wikiStyle === void 0 ? false : _ref$wikiStyle,
+    pathArticles = _ref.pathArticles;
+  var _useState = (0, _react.useState)(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    articleName = _useState2[0],
+    setArticleName = _useState2[1];
+  var artPath = pathArticles ? pathArticles + cpu : cpu;
+  var articlePath = wiki ? (pathBread ? '/' + pathBread : '') + '/wiki' + (portalId == 6 ? +'/ru' + artPath : artPath) : portalId == 6 ? (pathBread ? '/' + pathBread : '') + '/ru' + artPath : (pathBread ? '/' + pathBread : '') + artPath;
+  (0, _react.useEffect)(function () {
+    setArticleName(Array.isArray(name) ? name === null || name === void 0 ? void 0 : name[0] : name);
+  }, [name]);
+  var translateMin = function translateMin() {
+    if (activeLang == 'en') return 'minutes';
+    if (activeLang == 'tr') return 'dak';
+    if (activeLang == 'th') return 'นาที';
+    return 'мин';
+  };
+  var translateAuthor = function translateAuthor() {
+    if (author) {
+      if (activeLang == 'en') return (0, _utils.transliter)(Array.isArray(author) ? author !== null && author !== void 0 && author[0] ? author === null || author === void 0 ? void 0 : author[0] : '' : author);
+      if (activeLang == 'tr') return (0, _utils.transliter)(Array.isArray(author) ? author !== null && author !== void 0 && author[0] ? author === null || author === void 0 ? void 0 : author[0] : '' : author);
+    } else {
+      if (activeLang == 'ru') return 'Неизвестный автор';
+      if (activeLang == 'tr') return 'Bilinmeyen Yazar';
+      if (activeLang == 'en') return 'Unknown_author';
+    }
+    return author ? author === null || author === void 0 ? void 0 : author[0] : author;
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "tile-long",
+    key: id
+  }, /*#__PURE__*/_react["default"].createElement(_link["default"], {
+    target: linkString ? '_blank' : '',
+    onClick: function onClick(e) {
+      if (stopRedirect) {
+        e.preventDefault();
+      }
+      if (onLinkClick && !stopRedirect) {
+        onLinkClick(e, id, articlePath);
+      }
+    },
+    key: id,
+    href: articlePath
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "article-min"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "img-content"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "img-box"
+  }, /*#__PURE__*/_react["default"].createElement(_SliderCarousel["default"], {
+    imgArr: photoPreview
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "content-box"
+  }, /*#__PURE__*/_react["default"].createElement("h3", {
+    className: "title"
+  }, search ? (0, _highlightWord.hightlightWord)(search, articleName) : articleName), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "description-content"
+  }, (Array.isArray(annotation) && (annotation === null || annotation === void 0 ? void 0 : annotation[0]) || annotation) && /*#__PURE__*/_react["default"].createElement("p", {
+    className: "text_description"
+  }, Array.isArray(annotation) ? annotation !== null && annotation !== void 0 && annotation[0] ? (0, _htmlReactParser["default"])(annotation === null || annotation === void 0 ? void 0 : annotation[0]) : '' : annotation ? (0, _htmlReactParser["default"])(annotation) : '')), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "text-and-info-box"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "top-info"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "author-box"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "author-avatar",
+    style: {
+      backgroundColor: author !== null && author !== void 0 && author[1] ? author === null || author === void 0 ? void 0 : author[1] : ''
+    }
+  }, (author === null || author === void 0 || (_author$ = author[0]) === null || _author$ === void 0 ? void 0 : _author$.length) > 0 ? author === null || author === void 0 || (_author$2 = author[0]) === null || _author$2 === void 0 || (_author$2 = _author$2.split(' ').map(function (str) {
+    return str[0];
+  }).reduce(function (acc, current) {
+    return acc += current;
+  }, '')) === null || _author$2 === void 0 ? void 0 : _author$2.toUpperCase() : '-'), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "text_grey"
+  }, translateAuthor(author))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "info-box"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "date-box"
+  }, /*#__PURE__*/_react["default"].createElement("img", _calendar_icon["default"]), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "text_grey"
+  }, date)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "view-box"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "icon-box"
+  }, /*#__PURE__*/_react["default"].createElement("img", _view_icon["default"])), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "text"
+  }, views)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "time-box"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "icon-box"
+  }, /*#__PURE__*/_react["default"].createElement("img", _time_icon["default"])), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "text"
+  }, "".concat(timeToRead ? timeToRead : '-', " ").concat(translateMin()))))), /*#__PURE__*/_react["default"].createElement(_ShareComponent.ShareComponent, {
+    activeLang: activeLang,
+    id: id,
+    articlePath: articlePath
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "bottom-info"
+  }))))));
+};
+var _default = exports["default"] = LongTileArticleBox;

package/dist/components/ArticleElements/LongTileArticleBox/LongTileArticleBox.scss

@@ -0,0 +1,362 @@
+// @import url('../assets/font.scss');
+
+.tile-long {
+    max-width: 100%;
+    width: 100%;
+    min-width: 740px;
+
+    .link-blue {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        justify-content: flex-end;
+        gap: 8px;
+        color: #4285F4;
+        font-family: Inter;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 22px;
+    }
+
+    .article-min {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        height: auto;
+        border: 2px solid #F2F5FA;
+        //overflow: hidden;
+        border-radius: 10px;
+
+
+        &:hover {
+            .content-box {
+                transition: 0.3s;
+                background-color: rgba(31, 31, 31, 0.04);
+            }
+
+            .img-box {
+                transition: 0.3s;
+                background-color: rgba(31, 31, 31, 0.04);
+            }
+        }
+
+        .img-content {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 16px;
+            min-height: calc(230px);
+            background: #F0F2F4;
+            width: 100%;
+            margin-left: auto;
+            margin-right: auto;
+            aspect-ratio: 1/0.53;
+            position: relative;
+            max-width: 348px;
+
+            .img-box {
+                width: 100%;
+                height: 100%;
+                border: 5px solid #fff;
+                background-color: #fff;
+                border-radius: 10px;
+                overflow: hidden;
+            }
+
+            //  border: 1px solid #AAAAAA;
+
+            .img-box {}
+
+
+
+            img {
+                display: inline-block;
+                max-width: 100%;
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+                border-radius: 8px;
+            }
+        }
+
+        .tag-box {
+            display: flex;
+            gap: 14px;
+            align-items: flex-start;
+            flex-wrap: nowrap;
+
+            .tag {
+                display: flex;
+                gap: 4px;
+                justify-content: center;
+                white-space: nowrap;
+                align-items: center;
+                font-size: 12px;
+                color: #9959FC;
+                font-family: "Golos Text";
+                font-size: 14px;
+                font-style: normal;
+                font-weight: 500;
+                line-height: 16px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+
+        .content-box {
+            padding: 16px;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            gap: 8px;
+            background-color: #fff;
+           // overflow: hidden;
+            width: calc(100% - 348px) ;
+
+            .title {
+                color: #2B2B46;
+                font-family: "Golos Text";
+                font-size: 20px;
+                font-style: normal;
+                font-weight: 600;
+                line-height: 24px;
+                display: -webkit-box;
+                -webkit-line-clamp: 1; // количество строк
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                hyphens: auto;
+                min-height: 24px;
+
+                b {
+                    background-color: #fdfd78;
+                }
+            }
+
+            .description-content {
+                margin-top: 2px;
+
+                .text_description {
+                    color: #5D5D75;
+                    font-family: "Golos Text";
+                    font-size: 14px;
+                    font-style: normal;
+                    font-weight: 400;
+                    line-height: 22px;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 4;
+                    -webkit-box-orient: vertical;
+                    overflow: hidden;
+                    hyphens: auto;
+                    min-height: 88px;
+
+                    b {
+                        background-color: #fdfd78;
+                    }
+                }
+
+                .btn-box {
+                    display: none;
+                    opacity: 0;
+                    visibility: hidden;
+                    //  transition: 0.3s;
+                }
+            }
+
+            .text_grey {
+                //white-space: nowrap;
+                text-overflow: ellipsis;
+                //overflow: hidden;
+                font-size: 14px;
+                font-size: 12px;
+                color: #AAAAAA;
+                overflow: hidden;
+            }
+
+            .top-box {
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+            }
+
+            .bottom-box {
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+            }
+
+
+        }
+
+        .text-and-info-box {
+            display: flex;
+            flex-direction: column;
+            gap: 17px;
+            width: 100%;
+            margin-top: 37px;
+
+            .top-info,
+            .bottom-info {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                width: 100%;
+
+                .text,
+                .text_grey {
+                    //white-space: nowrap;
+                    color: #2B2B46;
+                    font-family: "Golos Text";
+                    font-size: 14px;
+                    font-style: normal;
+                    font-weight: 500;
+                    line-height: 18px;
+                }
+            }
+
+            .top-info {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                overflow: hidden;
+                width: 100%;
+
+                .author-box {
+                    display: flex;
+                    align-items: center;
+                    gap: 8px;
+                    overflow: hidden;
+                }
+
+                .author-avatar {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 24px;
+                    height: 24px;
+                    min-width: 24px;
+                    background-color: #27BC62;
+                    color: #FFF;
+                    text-align: center;
+                    font-family: NunitoSans;
+                    border-radius: 50%;
+                    font-size: 10px;
+                    font-style: normal;
+                    font-weight: 700;
+                    line-height: 12px;
+                }
+
+                .text,
+                .text_grey {
+                    color: #2B2B46;
+                    font-family: "Golos Text";
+                    font-size: 14px;
+                    font-style: normal;
+                    font-weight: 500;
+                    line-height: 18px;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 1; // количество строк
+                    -webkit-box-orient: vertical;
+                    overflow: hidden;
+                    word-break: break-word;
+                    hyphens: auto;
+                    overflow: hidden;
+                    gap: 8px;
+                }
+            }
+
+            .date-box,
+            .time-box,
+            .view-box {
+                display: flex;
+                align-items: center;
+                gap: 6px;
+
+                .icon-box {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 4px;
+                    // border: 1px solid #EAECEA;
+                    background-color: #fff;
+                }
+            }
+
+            .info-box {
+                display: flex;
+                gap: 14px;
+
+
+                .text,
+                .text_grey {
+                    white-space: nowrap;
+                    color: #0B110B;
+                    text-align: right;
+                    font-family: NunitoSans;
+                    font-size: 14px;
+                    font-style: normal;
+                    font-weight: 700;
+                    line-height: 16px;
+
+                    span {
+                        color: #B4B8B4;
+                        font-family: NunitoSans;
+                        font-size: 14px;
+                        font-style: normal;
+                        font-weight: 300;
+                        line-height: 16px;
+                    }
+
+                    .info-box {
+                        display: flex;
+                        flex-direction: column;
+                        align-items: end;
+                        gap: 4px;
+
+                        .time-box,
+                        .view-box {
+                            display: flex;
+                            align-items: center;
+                            gap: 5px;
+
+                            .icon-box {
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                border-radius: 4px;
+                                border: 1px solid #EAECEA;
+                                width: 24px;
+                                height: 24px;
+                            }
+
+
+                        }
+
+                    }
+
+
+                }
+            }
+        }
+
+        .toolbar-bottom {
+            display: flex;
+            gap: 16px;
+            align-items: start;
+
+            .author {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                color: #888888;
+                font-size: 12px;
+                height: 23px;
+                min-height: 23px;
+                max-height: 23px;
+                white-space: nowrap;
+            }
+        }
+
+    }
+}

package/dist/components/ArticleElements/LongTileArticleBox/LongTileArticleBox.stories.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _LongTileArticleBox = _interopRequireDefault(require("./LongTileArticleBox"));
+var _addonActions = require("@storybook/addon-actions");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  title: 'LongTileArticleBox',
+  component: _LongTileArticleBox["default"],
+  args: {
+    id: 1,
+    name: ['Как увеличить продажи', 'asdasdsa'],
+    author: ["Александрhhhhhhhhhhh Морозовhhhhhhh", "rgb(175, 55, 63)"],
+    annotation: 'Когда селлер, торгующий на маркетплейсе, становится популярнее, ему приходится ежедневно обрабатывать… Когда селлер, торгующий на маркетплейсе, становится популярнее, ему приходится ежедневно обрабатывать…',
+    photoPreview: ['https://assets.cdn.personio.de/career-site/header/43501/28ed0d8a9de664d5fdcd5314facf8b51png', 'https://www.rollingstone.com/wp-content/uploads/2018/06/rs-186804-peripheryjeremysaffer.jpg'],
+    tags: ['какой-то тэг', 'какой-то тэг'],
+    date: "14 апреля 2025",
+    timeToRead: 100500,
+    views: 15,
+    statusArray: ["https://dl.ecomru.ru/svg-storage/icon-waiting.svg", "Update"],
+    pathBread: 'main',
+    onLinkClick: (0, _addonActions.action)('onLinkClick'),
+    showStatus: true,
+    activeLang: 'th',
+    isDropShare: true,
+    setIsDropShare: (0, _addonActions.action)('setIsDropShare')
+  }
+};
+var Default = exports.Default = {};

package/dist/components/ArticleElements/LongTileArticleBox/img/arrow_blue.svg

@@ -0,0 +1,6 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 393">
+<path id="Vector" d="M1.07092 11L11 1" stroke="#4285F4" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M11 11V1H1.07092" stroke="#4285F4" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/dist/components/ArticleElements/LongTileArticleBox/img/calendar_icon.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bx-calendar.svg">
+<path id="Vector" d="M4.6665 7.33331H5.99984V8.66665H4.6665V7.33331ZM4.6665 9.99998H5.99984V11.3333H4.6665V9.99998ZM7.33317 7.33331H8.6665V8.66665H7.33317V7.33331ZM7.33317 9.99998H8.6665V11.3333H7.33317V9.99998ZM9.99984 7.33331H11.3332V8.66665H9.99984V7.33331ZM9.99984 9.99998H11.3332V11.3333H9.99984V9.99998Z" fill="#5D5D75"/>
+<path id="Vector_2" d="M3.33333 14.6666H12.6667C13.402 14.6666 14 14.0686 14 13.3333V3.99998C14 3.26465 13.402 2.66665 12.6667 2.66665H11.3333V1.33331H10V2.66665H6V1.33331H4.66667V2.66665H3.33333C2.598 2.66665 2 3.26465 2 3.99998V13.3333C2 14.0686 2.598 14.6666 3.33333 14.6666ZM12.6667 5.33331L12.6673 13.3333H3.33333V5.33331H12.6667Z" fill="#5D5D75"/>
+</g>
+</svg>

package/dist/components/ArticleElements/LongTileArticleBox/img/copy_icon.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bx-copy.svg">
+<path id="Vector" d="M13.3335 1.33331H6.66683C5.9315 1.33331 5.3335 1.93131 5.3335 2.66665V5.33331H2.66683C1.9315 5.33331 1.3335 5.93131 1.3335 6.66665V13.3333C1.3335 14.0686 1.9315 14.6666 2.66683 14.6666H9.3335C10.0688 14.6666 10.6668 14.0686 10.6668 13.3333V10.6666H13.3335C14.0688 10.6666 14.6668 10.0686 14.6668 9.33331V2.66665C14.6668 1.93131 14.0688 1.33331 13.3335 1.33331ZM2.66683 13.3333V6.66665H9.3335L9.33483 13.3333H2.66683ZM13.3335 9.33331H10.6668V6.66665C10.6668 5.93131 10.0688 5.33331 9.3335 5.33331H6.66683V2.66665H13.3335V9.33331Z" fill="#4285F4"/>
+</g>
+</svg>

package/dist/components/ArticleElements/LongTileArticleBox/img/ok_icon.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bxl-ok-ru.svg">
+<path id="Vector" d="M7.99044 8.22731C6.10711 8.22731 4.54177 6.66331 4.54177 4.81265C4.54177 2.89798 6.10711 1.33331 7.99111 1.33331C9.93911 1.33331 11.4398 2.89731 11.4398 4.81265C11.4364 5.72135 11.0724 6.59154 10.4277 7.23196C9.78305 7.87238 8.91048 8.23064 8.00177 8.22798L7.99044 8.22731ZM7.99044 3.34465C7.19311 3.34465 6.58644 4.01465 6.58644 4.81331C6.58644 5.61065 7.19311 6.21731 7.99111 6.21731C8.82111 6.21731 9.39577 5.61065 9.39577 4.81331C9.39644 4.01398 8.82111 3.34465 7.99044 3.34465ZM9.36377 11.0686L11.3124 12.952C11.6958 13.366 11.6958 13.9726 11.3124 14.356C10.8978 14.77 10.2584 14.77 9.93911 14.356L7.99111 12.4406L6.10711 14.356C5.91577 14.5473 5.65977 14.6426 5.37177 14.6426C5.14844 14.6426 4.89311 14.5466 4.66911 14.356C4.28577 13.9726 4.28577 13.366 4.66911 12.9513L6.64911 11.068C5.93406 10.8562 5.24813 10.5564 4.60711 10.1753C4.12777 9.91998 4.03244 9.28198 4.28777 8.80265C4.60711 8.32398 5.18177 8.19665 5.69311 8.51598C6.3855 8.93852 7.18096 9.16207 7.99211 9.16207C8.80325 9.16207 9.59871 8.93852 10.2911 8.51598C10.8024 8.19665 11.4084 8.32398 11.6958 8.80265C11.9838 9.28198 11.8551 9.91931 11.4078 10.1753C10.8018 10.5586 10.0991 10.846 9.36444 11.0693L9.36377 11.0686Z" fill="#4285F4"/>
+</g>
+</svg>

package/dist/components/ArticleElements/LongTileArticleBox/img/share_icon.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bx-share.svg">
+<path id="Vector" d="M7.33314 4.7V2.66667C7.33314 2.48986 7.2629 2.32029 7.13787 2.19526C7.01285 2.07024 6.84328 2 6.66647 2C6.49158 2.00074 6.32398 2.07017 6.1998 2.19333L1.53314 6.86C1.47065 6.92198 1.42105 6.99571 1.38721 7.07695C1.35336 7.15819 1.33594 7.24533 1.33594 7.33333C1.33594 7.42134 1.35336 7.50848 1.38721 7.58972C1.42105 7.67096 1.47065 7.74469 1.53314 7.80667L6.1998 12.4733C6.29339 12.5651 6.41194 12.6272 6.54064 12.6519C6.66934 12.6767 6.80247 12.6629 6.9234 12.6124C7.04433 12.5619 7.14769 12.4769 7.22056 12.368C7.29344 12.259 7.33259 12.1311 7.33314 12V9.93333H7.8998C8.95308 9.91762 9.99716 10.1313 10.9596 10.5596C11.922 10.9878 12.7797 11.6204 13.4731 12.4133C13.5567 12.5246 13.673 12.6069 13.8057 12.6487C13.9384 12.6906 14.0809 12.6899 14.2131 12.6467C14.3477 12.6012 14.4643 12.514 14.5459 12.3977C14.6274 12.2814 14.6697 12.142 14.6665 12C14.6665 5.92 9.2798 4.88 7.33314 4.7ZM7.8998 8.58667C7.45391 8.58527 7.00843 8.61423 6.56647 8.67333C6.40864 8.69728 6.26465 8.77706 6.16066 8.89818C6.05667 9.01929 5.99959 9.1737 5.9998 9.33333V10.3933L2.94647 7.33333L5.9998 4.27333V5.33333C5.9998 5.51014 6.07004 5.67971 6.19507 5.80474C6.32009 5.92976 6.48966 6 6.66647 6C7.27314 6 12.0731 6.13333 13.1131 10.2867C11.6036 9.17371 9.77525 8.5775 7.8998 8.58667Z" fill="#4285F4"/>
+</g>
+</svg>

package/dist/components/ArticleElements/LongTileArticleBox/img/tag_icon.svg

@@ -0,0 +1,5 @@
+<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="tag">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M9.79497 6.74318L6.14322 10.4673C6.00336 10.6099 5.81392 10.6903 5.61615 10.6912C5.41838 10.6921 5.22827 10.6132 5.08722 10.4719L1.74972 7.13012C1.60792 6.98794 1.52731 6.79415 1.52562 6.59137C1.52394 6.3886 1.60131 6.19344 1.74072 6.04883L5.39172 2.25589C5.49636 2.14704 5.62122 2.06056 5.759 2.00147C5.89679 1.94239 6.04475 1.91189 6.19422 1.91177H9.37497C9.57389 1.91177 9.76465 1.99234 9.9053 2.13575C10.046 2.27916 10.125 2.47366 10.125 2.67647V5.93183C10.1249 6.08254 10.0958 6.23177 10.0392 6.37099C9.98254 6.5102 9.89956 6.63668 9.79497 6.74318ZM4.58847 1.45142C4.79796 1.23392 5.04785 1.06117 5.32356 0.943262C5.59926 0.825355 5.89525 0.764655 6.19422 0.76471H9.37497C9.87226 0.76471 10.3492 0.966127 10.7008 1.32465C11.0524 1.68318 11.25 2.16944 11.25 2.67647V5.93183C11.25 6.2332 11.1918 6.53163 11.0787 6.81006C10.9656 7.08849 10.7998 7.34146 10.5907 7.55453L6.93822 11.2786C6.58859 11.6349 6.11517 11.8359 5.62091 11.838C5.12666 11.8402 4.65157 11.6433 4.29897 11.2901L0.961474 7.94836C0.606764 7.5931 0.404968 7.10874 0.400468 6.60181C0.395967 6.09487 0.58913 5.60686 0.937474 5.24512L4.58847 1.45294V1.45142ZM7.87497 4.97059C7.62633 4.97059 7.38788 4.86988 7.21206 4.69062C7.03625 4.51136 6.93747 4.26822 6.93747 4.01471C6.93747 3.76119 7.03625 3.51806 7.21206 3.3388C7.38788 3.15954 7.62633 3.05883 7.87497 3.05883C8.12361 3.05883 8.36207 3.15954 8.53789 3.3388C8.7137 3.51806 8.81247 3.76119 8.81247 4.01471C8.81247 4.26822 8.7137 4.51136 8.53789 4.69062C8.36207 4.86988 8.12361 4.97059 7.87497 4.97059Z" fill="#B4B8B4"/>
+</g>
+</svg>

package/dist/components/ArticleElements/LongTileArticleBox/img/tg_icon.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bxl-telegram.svg">
+<path id="Vector" d="M13.7766 2.478L1.95657 7.036C1.1499 7.36 1.15457 7.81 1.80857 8.01067L4.84323 8.95734L11.8646 4.52734C12.1966 4.32534 12.4999 4.434 12.2506 4.65534L6.5619 9.78934H6.56057L6.5619 9.79L6.35257 12.918C6.65923 12.918 6.79457 12.7773 6.96657 12.6113L8.44057 11.178L11.5066 13.4427C12.0719 13.754 12.4779 13.594 12.6186 12.9193L14.6312 3.434C14.8372 2.608 14.3159 2.234 13.7766 2.478Z" fill="#4285F4"/>
+</g>
+</svg>

package/dist/components/ArticleElements/LongTileArticleBox/img/time_icon.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bx-time-five.svg">
+<path id="Vector" d="M8.00016 1.33331C4.32416 1.33331 1.3335 4.32398 1.3335 7.99998C1.3335 11.676 4.32416 14.6666 8.00016 14.6666C11.6762 14.6666 14.6668 11.676 14.6668 7.99998C14.6668 4.32398 11.6762 1.33331 8.00016 1.33331ZM8.00016 13.3333C5.0595 13.3333 2.66683 10.9406 2.66683 7.99998C2.66683 5.05931 5.0595 2.66665 8.00016 2.66665C10.9408 2.66665 13.3335 5.05931 13.3335 7.99998C13.3335 10.9406 10.9408 13.3333 8.00016 13.3333Z" fill="#5D5D75"/>
+<path id="Vector_2" d="M8.66683 4.66669H7.3335V8.27602L9.52883 10.4714L10.4715 9.52869L8.66683 7.72402V4.66669Z" fill="#5D5D75"/>
+</g>
+</svg>

package/dist/components/ArticleElements/LongTileArticleBox/img/view_icon.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bx-show-alt.svg">
+<path id="Vector" d="M9.33333 8C8.60333 8 8 7.39667 8 6.66667C8 6.43067 8.06867 6.21133 8.17867 6.018C8.11867 6.01333 8.06133 6 8 6C7.47065 6.00349 6.96397 6.21533 6.58965 6.58965C6.21533 6.96397 6.00349 7.47065 6 8C6 9.09467 6.90533 10 8 10C9.094 10 10 9.09467 10 8C10 7.93867 9.98667 7.88133 9.982 7.82133C9.78867 7.93133 9.56933 8 9.33333 8Z" fill="#5D5D75"/>
+<path id="Vector_2" d="M8.00003 3.33331C2.91136 3.33331 1.38203 7.74465 1.36803 7.78931L1.29736 7.99998L1.36736 8.21065C1.38203 8.25531 2.91136 12.6666 8.00003 12.6666C13.0887 12.6666 14.618 8.25531 14.632 8.21065L14.7027 7.99998L14.6327 7.78931C14.618 7.74465 13.0887 3.33331 8.00003 3.33331ZM8.00003 11.3333C4.4327 11.3333 3.0507 8.76931 2.71603 7.99998C3.05203 7.22798 4.4347 4.66665 8.00003 4.66665C11.5674 4.66665 12.9494 7.23065 13.284 7.99998C12.948 8.77198 11.5654 11.3333 8.00003 11.3333Z" fill="#5D5D75"/>
+</g>
+</svg>

package/dist/components/ArticleElements/LongTileArticleBox/img/vk_icon.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bxl-vk.svg">
+<path id="Vector" d="M14.3862 4.56999C14.4795 4.25999 14.3862 4.03265 13.9448 4.03265H12.4828C12.1108 4.03265 11.9408 4.22932 11.8475 4.44532C11.8475 4.44532 11.1042 6.25799 10.0508 7.43332C9.71083 7.77532 9.5555 7.88332 9.37016 7.88332C9.2775 7.88332 9.14283 7.77532 9.14283 7.46532V4.56999C9.14283 4.19799 9.0355 4.03265 8.7255 4.03265H6.42816C6.19616 4.03265 6.05616 4.20465 6.05616 4.36865C6.05616 4.72065 6.58283 4.80199 6.63683 5.79399V7.94599C6.63683 8.41732 6.55216 8.50332 6.3655 8.50332C5.87016 8.50332 4.66483 6.68399 3.9495 4.60132C3.81016 4.19665 3.6695 4.03332 3.29616 4.03332H1.83483C1.41683 4.03332 1.3335 4.22999 1.3335 4.44599C1.3335 4.83399 1.82883 6.75399 3.64083 9.29332C4.84883 11.0273 6.5495 11.9673 8.09883 11.9673C9.0275 11.9673 9.14216 11.7587 9.14216 11.3987V10.088C9.14216 9.67065 9.23083 9.58665 9.52483 9.58665C9.74083 9.58665 10.1128 9.69599 10.9802 10.5313C11.9708 11.522 12.1348 11.9667 12.6915 11.9667H14.1528C14.5702 11.9667 14.7788 11.758 14.6588 11.346C14.5275 10.936 14.0542 10.3393 13.4262 9.63332C13.0848 9.23065 12.5748 8.79732 12.4195 8.58065C12.2028 8.30132 12.2655 8.17799 12.4195 7.92999C12.4202 7.93065 14.2008 5.42265 14.3862 4.56999Z" fill="#4285F4"/>
+</g>
+</svg>

package/dist/components/ArticleElements/LongTileArticleBox/img/whatsapp_icon.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bxl-whatsapp.svg">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M12.2687 3.75535C11.7142 3.19728 11.0546 2.75476 10.3279 2.45345C9.60123 2.15214 8.822 1.99802 8.03533 2.00002C4.73667 2.00002 2.05133 4.68469 2.05 7.98469C2.05 9.03935 2.32533 10.0687 2.84867 10.9767L2 14.0774L5.17267 13.2447C6.05026 13.7224 7.03347 13.9729 8.03267 13.9734H8.03533C11.3333 13.9734 14.0187 11.2887 14.02 7.98869C14.0223 7.20234 13.8687 6.42335 13.5681 5.69673C13.2674 4.9701 12.8258 4.31027 12.2687 3.75535ZM8.03533 12.9634H8.03333C7.14234 12.9634 6.26776 12.7237 5.50133 12.2694L5.32 12.1614L3.43733 12.6554L3.93933 10.82L3.82133 10.632C3.32319 9.83897 3.05949 8.92121 3.06067 7.98469C3.062 5.24202 5.29333 3.01069 8.03733 3.01069C8.69083 3.00923 9.33813 3.13741 9.94177 3.38779C10.5454 3.63817 11.0934 4.00578 11.554 4.46935C12.0171 4.93071 12.3841 5.47928 12.6339 6.08335C12.8837 6.68742 13.0113 7.33501 13.0093 7.98869C13.008 10.7314 10.7767 12.9634 8.03533 12.9634ZM10.764 9.23735C10.614 9.16202 9.87933 8.80069 9.742 8.75069C9.60533 8.70069 9.506 8.67602 9.406 8.82535C9.306 8.97469 9.01933 9.31135 8.932 9.41135C8.84467 9.51135 8.75733 9.52335 8.608 9.44869C8.45867 9.37402 7.97667 9.21602 7.40533 8.70669C6.96067 8.31002 6.66067 7.82068 6.57333 7.67069C6.486 7.52069 6.564 7.44002 6.63933 7.36535C6.70667 7.29869 6.78867 7.19069 6.86333 7.10335C6.938 7.01602 6.96267 6.95402 7.01267 6.85402C7.06267 6.75402 7.038 6.66669 7 6.59202C6.96267 6.51669 6.66333 5.78069 6.53867 5.48135C6.418 5.19135 6.29467 5.23002 6.20267 5.22602C6.10738 5.22212 6.01203 5.22034 5.91667 5.22069C5.84084 5.22262 5.76622 5.2402 5.69751 5.27232C5.62879 5.30444 5.56745 5.35041 5.51733 5.40735C5.38 5.55735 4.994 5.91869 4.994 6.65469C4.994 7.39069 5.53 8.10202 5.60467 8.20202C5.67933 8.30202 6.65933 9.81202 8.15933 10.46C8.51667 10.614 8.79533 10.706 9.012 10.7754C9.37 10.8894 9.696 10.8727 9.954 10.8347C10.2413 10.792 10.8387 10.4734 10.9633 10.124C11.088 9.77469 11.088 9.47535 11.0507 9.41269C11.0133 9.35002 10.9127 9.31202 10.764 9.23735Z" fill="#4285F4"/>
+</g>
+</svg>

package/dist/components/ArticleElements/ShareComponent/ShareComponent.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {

package/dist/components/ArticleElements/ShortTileArticleBox/ShortTileArticleBox.js

@@ -85,7 +85,7 @@ var ShortTileArticleBox = function ShortTileArticleBox(_ref) {
     return author ? author === null || author === void 0 ? void 0 : author[0] : author;
   };
   try {
-    var _tags$map, _author$, _author$2;
+    var _author$, _author$2;
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, wikiStyle ? /*#__PURE__*/_react["default"].createElement("div", {
       className: "tile-short-wiki",
       key: id
@@ -131,21 +131,7 @@ var ShortTileArticleBox = function ShortTileArticleBox(_ref) {
       imgArr: photoPreview
     }))), /*#__PURE__*/_react["default"].createElement("div", {
       className: "content-box"
-    }, (tags === null || tags === void 0 ? void 0 : tags.length) > 0 && tags[0] && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "tag-box"
-    }, (tags === null || tags === void 0 ? void 0 : tags.length) > 0 && (tags === null || tags === void 0 || (_tags$map = tags.map(function (t, index) {
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        key: t + index,
-        className: "tag"
-      }, t);
-    })) === null || _tags$map === void 0 ? void 0 : _tags$map.splice(0, 1)), (tags === null || tags === void 0 ? void 0 : tags.length) > 1 && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "tag",
-      style: {
-        marginLeft: 'auto',
-        textOverflow: 'clip',
-        overflow: 'visible'
-      }
-    }, '+ ' + ((tags === null || tags === void 0 ? void 0 : tags.length) - 1))), /*#__PURE__*/_react["default"].createElement("h3", {
+    }, /*#__PURE__*/_react["default"].createElement("h3", {
       className: "title"
     }, search ? (0, _highlightWord.hightlightWord)(search, articleName) : articleName), /*#__PURE__*/_react["default"].createElement("div", {
       className: "description-content"

package/dist/index.js

@@ -93,6 +93,12 @@ Object.defineProperty(exports, "ListOfContent", {
     return _ListOfContent["default"];
   }
 });
+Object.defineProperty(exports, "LongTileArticleBox", {
+  enumerable: true,
+  get: function get() {
+    return _LongTileArticleBox["default"];
+  }
+});
 Object.defineProperty(exports, "MainContainer", {
   enumerable: true,
   get: function get() {
@@ -192,4 +198,5 @@ var _ModalMiltilevelSidebarSettings = _interopRequireDefault(require("./componen
 var _ArticleViewV = _interopRequireDefault(require("./components/Article/ArticleViewV2/ArticleViewV2"));
 var _ListOfContent = _interopRequireDefault(require("./components/Article/ListOfContent/ListOfContent"));
 var _ShortTileArticleBox = _interopRequireDefault(require("./components/ArticleElements/ShortTileArticleBox/ShortTileArticleBox"));
+var _LongTileArticleBox = _interopRequireDefault(require("./components/ArticleElements/LongTileArticleBox/LongTileArticleBox"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecomlab-components-next",
-  "version": "0.1.104",
+  "version": "0.1.105",
   "description": "A set of common and reusable React components",
   "main": "dist/index.js",
   "files": [