ecomlab-components-next 0.1.16 → 0.1.18

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

@@ -0,0 +1,165 @@
+"use strict";
+
+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.ShareComponent = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _vk_icon = _interopRequireDefault(require("./img/vk_icon.svg"));
+var _tg_icon = _interopRequireDefault(require("./img/tg_icon.svg"));
+var _whatsapp_icon = _interopRequireDefault(require("./img/whatsapp_icon.svg"));
+var _ok_icon = _interopRequireDefault(require("./img/ok_icon.svg"));
+var _image = _interopRequireDefault(require("next/image"));
+var _copy_icon = _interopRequireDefault(require("./img/copy_icon.svg"));
+var _x_icon = _interopRequireDefault(require("./img/x_icon.svg"));
+var _facebook_icon = _interopRequireDefault(require("./img/facebook_icon.svg"));
+var _linkedin_icon = _interopRequireDefault(require("./img/linkedin_icon.svg"));
+var _share_icon = _interopRequireDefault(require("./img/share_icon.svg"));
+require("./ShareComponent.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 share_btns_rus = [{
+  label: 'Скопировать ссылку',
+  icon: _copy_icon["default"],
+  value: 'path'
+}, {
+  label: 'ВКонтакте',
+  icon: _vk_icon["default"],
+  value: 'https://vk.com/share.php?url='
+}, {
+  label: 'Telegram',
+  icon: _tg_icon["default"],
+  value: 'https://t.me/share/url?url='
+},
+// {
+//     label: 'Яндекс дзен',
+//     value: 'https://dzen.ru/ecomru',
+//     redirect: true
+// },
+{
+  label: 'WhatsApp',
+  icon: _whatsapp_icon["default"],
+  value: 'https://api.whatsapp.com/send?text='
+}, {
+  label: 'Одноклассники',
+  icon: _ok_icon["default"],
+  value: 'https://connect.ok.ru/offer?url='
+}];
+var share_btns_tur = [{
+  label: 'Bağlantıyı kopyala',
+  icon: _copy_icon["default"],
+  value: 'path'
+}, {
+  label: 'X (Twitter)',
+  icon: _x_icon["default"],
+  value: 'http://twitter.com/share?url='
+}, {
+  label: 'Linkedin',
+  icon: _linkedin_icon["default"],
+  value: 'https://www.linkedin.com/sharing/share-offsite/?url='
+}, {
+  label: 'Facebook',
+  icon: _facebook_icon["default"],
+  value: 'http://www.facebook.com/sharer.php?s=100&url='
+}];
+var share_btns_eng = [{
+  label: 'Copy link',
+  icon: _copy_icon["default"],
+  value: 'path'
+}, {
+  label: 'X (Twitter)',
+  icon: _x_icon["default"],
+  value: 'http://twitter.com/share?url='
+}, {
+  label: 'Linkedin',
+  icon: _linkedin_icon["default"],
+  value: 'https://www.linkedin.com/sharing/share-offsite/?url='
+}, {
+  label: 'Facebook',
+  icon: _facebook_icon["default"],
+  value: 'http://www.facebook.com/sharer.php?s=100&url='
+}];
+var ShareComponent = exports.ShareComponent = function ShareComponent(_ref) {
+  var id = _ref.id,
+    activeLang = _ref.activeLang,
+    articlePath = _ref.articlePath,
+    _ref$hideText = _ref.hideText,
+    hideText = _ref$hideText === void 0 ? false : _ref$hideText;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDropShare = _useState2[0],
+    setIsDropShare = _useState2[1];
+  var translateShare = function translateShare() {
+    if (activeLang == 'en') return 'Share';
+    if (activeLang == 'tr') return 'Paylaş';
+    return 'Поделиться';
+  };
+  var translateBtn = function translateBtn() {
+    if (activeLang == 'en') return share_btns_eng;
+    if (activeLang == 'tr') return share_btns_tur;
+    return share_btns_rus;
+  };
+
+  // Обработчик на клик вне элемента
+  (0, _react.useEffect)(function () {
+    var isDrop = function isDrop(e) {
+      var el = e.target;
+      if (!el.closest("#share-".concat(id))) {
+        setIsDropShare(false);
+      }
+    };
+    document.addEventListener('click', isDrop);
+    return function () {
+      document.addEventListener('click', isDrop);
+    };
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "share",
+    id: "share-".concat(id),
+    onClick: function onClick(e) {
+      return e.stopPropagation;
+    }
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    className: "share-btn",
+    onClick: function onClick(e) {
+      e.preventDefault();
+      setIsDropShare(!isDropShare);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_image["default"], {
+    src: _share_icon["default"]
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "share__text"
+  }, " ", !hideText && translateShare())), isDropShare && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "share__drop-container"
+  }, translateBtn().map(function (_ref2) {
+    var label = _ref2.label,
+      icon = _ref2.icon,
+      value = _ref2.value,
+      redirect = _ref2.redirect;
+    return /*#__PURE__*/_react["default"].createElement("button", {
+      className: "share-btn",
+      key: label + icon,
+      onClick: function onClick(e) {
+        e.preventDefault();
+        setIsDropShare(false);
+        if (value) {
+          if (value === 'path') {
+            return navigator.clipboard.writeText(window.location.origin + articlePath);
+          }
+          window.open(redirect ? value : value + window.location.origin + articlePath, '_blank');
+        }
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_image["default"], {
+      alt: "icon",
+      src: icon
+    }), label);
+  })));
+};

package/dist/components/ArticleElements/ShareComponent/ShareComponent.scss

@@ -0,0 +1,75 @@
+.share {
+    position: relative;
+
+    .share-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        border: none;
+        background-color: inherit;
+        color: #4285F4;
+        font-family: "Golos Text";
+        font-size: 15px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 16px;
+        background-color: #F0F2F4;
+        border-radius: 4px;
+        padding: 2px 6px;
+        cursor: pointer;
+        border-radius: 4px;
+        background: #F0F2F4;
+        min-height: 28px;
+    }
+
+    &__drop-container {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        position: absolute;
+        top: calc(100% + 8px);
+        right: 0;
+        min-width: 156px;
+        width: 177px;
+        padding: 6px;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+        background: #FFF;
+        box-shadow: 0px 1px 9px 0px rgba(0, 0, 0, 0.14);
+        z-index: 2;
+        pointer-events: all;
+        border-radius: 4px;
+        overflow: hidden;
+        left: 0;
+
+        .share-btn {
+            min-height: auto;
+            font-size: 13px;
+            padding: 0;
+            background-color: inherit;
+        }
+    }
+}
+
+@media(max-width: 1000px) {
+    .share {
+        position: relative;
+
+        .share-btn {
+            width: 100%;
+        }
+
+        &__drop-container {
+            width: 100%;
+            max-width: 100%;
+        }
+    }
+
+    .right-content {
+        .share__text {
+            display: none;
+        }
+    }
+}

package/dist/components/ArticleElements/ShareComponent/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/ShareComponent/img/facebook_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-facebook.svg">
+<path id="Vector" d="M8.93152 13.998V8.53399H10.7749L11.0489 6.39466H8.93152V5.03199C8.93152 4.41466 9.10352 3.99199 9.98952 3.99199H11.1122V2.08466C10.5659 2.02612 10.0169 1.99785 9.46752 1.99999C7.83818 1.99999 6.71952 2.99466 6.71952 4.82066V6.39066H4.88818V8.52999H6.72352V13.998H8.93152Z" fill="#4285F4"/>
+</g>
+</svg>

package/dist/components/ArticleElements/ShareComponent/img/linkedin_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="bxl-linkedin.svg">
+<path id="Vector" d="M3.32195 4.79801C4.12755 4.79801 4.78061 4.14494 4.78061 3.33934C4.78061 2.53374 4.12755 1.88068 3.32195 1.88068C2.51635 1.88068 1.86328 2.53374 1.86328 3.33934C1.86328 4.14494 2.51635 4.79801 3.32195 4.79801Z" fill="#4285F4"/>
+<path id="Vector_2" d="M6.15814 5.90334V13.996H8.67081V9.99401C8.67081 8.93801 8.86948 7.91534 10.1788 7.91534C11.4701 7.91534 11.4861 9.12267 11.4861 10.0607V13.9967H14.0001V9.55867C14.0001 7.37867 13.5308 5.70334 10.9828 5.70334C9.75948 5.70334 8.93948 6.37467 8.60414 7.01001H8.57014V5.90334H6.15814ZM2.06348 5.90334H4.58014V13.996H2.06348V5.90334Z" fill="#4285F4"/>
+</g>
+</svg>

package/dist/components/ArticleElements/ShareComponent/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/ShareComponent/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/ShareComponent/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/ShareComponent/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/ShareComponent/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/img/x_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="icons8-twitterx (1) 1">
+<path id="Vector" d="M1.9113 2L6.49072 8.54557L1.82275 14H3.58708L7.27979 9.67318L10.3071 14H14.2472L9.44906 7.13151L13.8293 2H12.0923L8.6639 6.00651L5.86572 2H1.9113Z" fill="#4285F4"/>
+</g>
+</svg>

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

@@ -0,0 +1,165 @@
+"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 _image = _interopRequireDefault(require("next/image"));
+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("./ShortTileArticleBox.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; }
+function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var ShortTileArticleBox = function ShortTileArticleBox(_ref) {
+  var _tags$map, _author$, _author$2;
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  var id = props.id,
+    name = props.name,
+    author = props.author,
+    annotation = props.annotation,
+    photoPreview = props.photoPreview,
+    tags = props.tags,
+    date = props.date,
+    timeToRead = props.timeToRead,
+    views = props.views,
+    onLinkClick = props.onLinkClick,
+    _props$activeLang = props.activeLang,
+    activeLang = _props$activeLang === void 0 ? 'ru' : _props$activeLang,
+    _props$linkString = props.linkString,
+    linkString = _props$linkString === void 0 ? false : _props$linkString,
+    _props$stopRedirect = props.stopRedirect,
+    stopRedirect = _props$stopRedirect === void 0 ? false : _props$stopRedirect,
+    _props$search = props.search,
+    search = _props$search === void 0 ? false : _props$search;
+  var _useState = (0, _react.useState)(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    articleName = _useState2[0],
+    setArticleName = _useState2[1];
+  var articlePath = annotation === null || annotation === void 0 ? void 0 : annotation[1];
+  (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 == 'eng') return 'min';
+    if (activeLang == 'tur') return 'dak';
+    return 'мин';
+  };
+  var translateAuthor = function translateAuthor() {
+    if (author) {
+      if (activeLang == 'eng') 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 == 'tur') 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 == 'tur') return 'Bilinmeyen Yazar';
+      if (activeLang == 'eng') return 'Unknown_author';
+    }
+    return author ? author === null || author === void 0 ? void 0 : author[0] : author;
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "tile-short",
+    key: id + '' + name + '' + author
+  }, /*#__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 ? 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"
+  }, (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", {
+    className: "title"
+  }, search ? (0, _highlightWord.hightlightWord)(search, articleName) : articleName), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "description-content"
+  }, /*#__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: "date-box"
+  }, /*#__PURE__*/_react["default"].createElement("img", _calendar_icon["default"]), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "text_grey"
+  }, date === null || date === void 0 ? void 0 : date.toLocaleDateString('ru-RU'))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "info-box"
+  }, /*#__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("div", {
+    className: "bottom-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(_ShareComponent.ShareComponent, {
+    activeLang: activeLang,
+    id: id,
+    articlePath: articlePath
+  }))))));
+};
+var _default = exports["default"] = ShortTileArticleBox;