ecomlab-components-next 0.1.32 → 0.1.34

package/dist/components/Article/SelectedBlocks/SelectedBlocks.js

@@ -0,0 +1,281 @@
+"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 _TextArticle = require("../TextArticle/TextArticle");
+var _TitleText = require("../TitleText/TitleText");
+var _SocialMedia = require("../SocialMedia/SocialMedia");
+var _InformationBlock = require("../InformationBlock/InformationBlock");
+var _ModalReplaceBlock = require("../ModalReplaceBlock/ModalReplaceBlock");
+var _ImgArticle = require("../ImgArticle/ImgArticle");
+var _FormBtn = require("../FormBtn/FormBtn");
+var _VideoArticle = require("../VideoArticle/VideoArticle");
+var _headers = _interopRequireDefault(require("../../../common/headers"));
+require("./SelectedBlocks.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 _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); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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 SelectedBlocks = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var apiData = _ref.apiData,
+    articleId = _ref.articleId,
+    setListLinks = _ref.setListLinks,
+    readonly = _ref.readonly,
+    fetchDataById = _ref.fetchDataById,
+    data = _ref.data;
+  var _useState = (0, _react.useState)([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    content = _useState2[0],
+    setContent = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isModal = _useState4[0],
+    setIsModal = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentIndex = _useState6[0],
+    setCurrentIndex = _useState6[1];
+  var _useState7 = (0, _react.useState)(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    beforeBlock = _useState8[0],
+    setBeforeBlock = _useState8[1];
+  var _useState9 = (0, _react.useState)(null),
+    _useState10 = _slicedToArray(_useState9, 2),
+    draggableElement = _useState10[0],
+    setDraggableElement = _useState10[1];
+
+  // Первоначальный рендер
+  // записываем контент если есть, если нет - создаем 1 новый блок
+  (0, _react.useEffect)(function () {
+    var _apiData$blocks;
+    if ((apiData === null || apiData === void 0 || (_apiData$blocks = apiData.blocks) === null || _apiData$blocks === void 0 ? void 0 : _apiData$blocks.length) > 0 || readonly) {
+      var blocks = apiData === null || apiData === void 0 ? void 0 : apiData.blocks;
+      setContent(blocks);
+    } else {
+      if (articleId && articleId !== -1 && (content === null || content === void 0 ? void 0 : content.length) === 0) {
+        fetchCreateBlock('text', null);
+      }
+    }
+  }, [apiData, articleId]);
+
+  // Создание блока, в ответ получаем id созданного
+  var fetchCreateBlock = function fetchCreateBlock(type) {
+    var before = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    var url;
+    if (!window.location.hostname.match('localhost')) {
+      url = "https://apps0.ecomru.ru:4447/api/v2/article/create_block";
+    } else {
+      url = "https://apps0.ecomru.ru:4447/api/v2/article/create_block";
+    }
+    var body = JSON.stringify({
+      type: type ? type : 'text',
+      before: before,
+      article_id: articleId
+    });
+    fetch(url, {
+      body: body,
+      method: 'POST',
+      headers: _headers["default"]
+    }).then(function (res) {
+      return res.json();
+    }).then(function (json) {
+      var init_data = {
+        block_type: 'text',
+        block_before: before,
+        block_id: json,
+        content: [{
+          value: ''
+        }]
+      };
+      if (content.length > 0) {
+        var index = content.findIndex(function (item) {
+          return item.block_id === before;
+        });
+        var newArr = [].concat(_toConsumableArray(content.slice(0, currentIndex + 1)), [
+        // Все элементы до индекса
+        init_data], _toConsumableArray(content.slice(currentIndex + 1)));
+        setContent(newArr);
+
+        //  let content_init = content
+        //  console.log(content_init)
+        //  let current_content = content_init.splice(0, 0, init_data);
+        //  console.log(current_content)
+        //setContent((prev) => [...prev, init_data])
+      } else {
+        setContent([init_data]);
+      }
+    })["catch"](function (err) {
+      return console.error(err);
+    });
+  };
+
+  // Изменение контента блока
+  var changeContent = function changeContent(id, content) {
+    var url;
+    if (!window.location.hostname.match('localhost')) {
+      url = "https://apps0.ecomru.ru:4447/api/v2/article/article_content";
+    } else {
+      url = "https://apps0.ecomru.ru:4447/api/v2/article/article_content";
+    }
+    var body = JSON.stringify({
+      block_id: id,
+      content: content
+    });
+    fetch(url, {
+      body: body,
+      method: 'POST',
+      headers: _headers["default"]
+    }).then(function (res) {
+      return res.json();
+    }).then(function (json) {
+      console.log(json);
+    })["catch"](function (err) {
+      return console.error(err);
+    });
+  };
+
+  // Изменение блока
+  var changeBlock = function changeBlock(type, article_id, block_id, before) {
+    var url;
+    if (!window.location.hostname.match('localhost')) {
+      url = "https://apps0.ecomru.ru:4447/api/v2/article/change_block";
+    } else {
+      url = "https://apps0.ecomru.ru:4447/api/v2/article/change_block";
+    }
+    var body = JSON.stringify({
+      type: type,
+      before: before,
+      article_id: article_id,
+      block_id: block_id
+    });
+    fetch(url, {
+      body: body,
+      method: 'PUT',
+      headers: _headers["default"]
+    }).then(function (res) {
+      return res.json();
+    }).then(function (json) {
+      console.log(json);
+    })["catch"](function (err) {
+      return console.error(err);
+    });
+  };
+
+  // Удаление блока
+  var deleteBlock = function deleteBlock(delete_id) {
+    var url;
+    if (!window.location.hostname.match('localhost')) {
+      url = "https://apps0.ecomru.ru:4447/api/v2/article/delete_block?block_id=".concat(delete_id);
+    } else {
+      url = "https://apps0.ecomru.ru:4447/api/v2/article/delete_block?block_id=".concat(delete_id);
+    }
+    fetch(url, {
+      method: 'DELETE',
+      headers: _headers["default"]
+    }).then(function (res) {
+      return res.json();
+    }).then(function (json) {
+      console.log(json);
+    })["catch"](function (err) {
+      return console.error(err);
+    });
+  };
+
+  // Добавление блока
+  var addNewBlock = function addNewBlock() {
+    if (articleId && articleId !== -1) {
+      fetchCreateBlock('text', beforeBlock);
+    }
+  };
+  (0, _react.useEffect)(function () {
+    var links = content === null || content === void 0 ? void 0 : content.filter(function (el) {
+      return el.block_type === 'title';
+    }).map(function (el) {
+      var _el$content;
+      return {
+        title: el === null || el === void 0 || (_el$content = el.content) === null || _el$content === void 0 || (_el$content = _el$content[0]) === null || _el$content === void 0 ? void 0 : _el$content.value,
+        id: el.block_id
+      };
+    });
+    if (setListLinks) {
+      setListLinks(links);
+    }
+  }, [content]);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isModal && /*#__PURE__*/_react["default"].createElement(_ModalReplaceBlock.ModalReplaceBlock, {
+    currentIndex: currentIndex,
+    setIsModal: setIsModal,
+    setContent: setContent,
+    changeBlock: changeBlock,
+    articleId: articleId
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Enter') {
+        console.log(e.key);
+        e.preventDefault(e.key);
+        addNewBlock();
+      }
+    }
+  }, content === null || content === void 0 ? void 0 : content.map(function (_ref2, ind) {
+    var block_type = _ref2.block_type,
+      content = _ref2.content,
+      block_id = _ref2.block_id,
+      block_before = _ref2.block_before;
+    var commonProps = _defineProperty({
+      id: block_id,
+      key: block_id,
+      // Используем уникальный блок ID для ключа
+      ind: ind,
+      setIsModal: setIsModal,
+      setCurrentIndex: setCurrentIndex,
+      editMode: true,
+      data: content,
+      changeContent: changeContent,
+      before: block_id,
+      setBeforeBlock: setBeforeBlock,
+      setContentArr: setContent,
+      deleteBlock: deleteBlock,
+      changeBlock: changeBlock,
+      readonly: readonly,
+      draggableElement: draggableElement,
+      setDraggableElement: setDraggableElement,
+      articleId: articleId,
+      fetchDataById: fetchDataById
+    }, "before", block_before);
+    if (block_type == 'text') return /*#__PURE__*/_react["default"].createElement(_TextArticle.TextArticle, commonProps);
+    if (block_type == 'title') return /*#__PURE__*/_react["default"].createElement(_TitleText.TitleText, commonProps);
+    if (block_type == 'social') return /*#__PURE__*/_react["default"].createElement(_SocialMedia.SocialMedia, _extends({}, commonProps, {
+      editMode: true
+    }));
+    if (block_type == 'info') return /*#__PURE__*/_react["default"].createElement(_InformationBlock.InformationBlock, _extends({}, commonProps, {
+      editMode: true
+    }));
+    if (block_type == 'image') return /*#__PURE__*/_react["default"].createElement(_ImgArticle.ImgArticle, _extends({}, commonProps, {
+      editMode: true
+    }));
+    if (block_type == 'form') return /*#__PURE__*/_react["default"].createElement(_FormBtn.FormBtn, _extends({}, commonProps, {
+      editMode: true
+    }));
+    if (block_type == 'video') return /*#__PURE__*/_react["default"].createElement(_VideoArticle.VideoArticle, _extends({}, commonProps, {
+      editMode: true
+    }));
+  })));
+});
+var _default = exports["default"] = SelectedBlocks;

package/dist/components/Article/SocialMedia/ModalSelectionSocialMedia/ModalSelectionSocialMedia.js

@@ -0,0 +1,130 @@
+"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.ModalSelectionSocialMedia = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ButtonBasic = _interopRequireDefault(require("../../../Buttons/ButtonBasic/ButtonBasic"));
+var _InputDinamycPlaceholder = _interopRequireDefault(require("../../../Inputs/InputDinamycPlaceholder/InputDinamycPlaceholder"));
+require("./ModalSelectionSocialMedia.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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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 social_list_rus = [{
+  name: 'Telegram',
+  img: "https://dl.ecomru.ru:9001/dev-images/tg.svg",
+  id: 1
+}, {
+  name: 'WhatsApp',
+  img: "https://dl.ecomru.ru:9001/dev-images/wtsp.svg",
+  id: 2
+}, {
+  name: 'Одноклассники',
+  img: "https://dl.ecomru.ru:9001/dev-images/ok.svg",
+  id: 3
+}, {
+  name: 'ВКонтакте',
+  img: "https://dl.ecomru.ru:9001/dev-images/vk.svg",
+  id: 4
+}, {
+  name: 'X (Twitter)',
+  img: "https://dl.ecomru.ru:9001/dev-images/xcom.svg",
+  id: 5
+}, {
+  name: 'Linkedin',
+  img: "https://dl.ecomru.ru:9001/dev-images/linkedin.svg",
+  id: 6
+}, {
+  name: 'Facebook',
+  img: "https://dl.ecomru.ru:9001/dev-images/facebook.svg",
+  id: 7
+}, {
+  name: 'Дзен',
+  img: "https://dl.ecomru.ru:9001/dev-images/dzen.svg",
+  id: 8
+}];
+var social_list_eng = [{
+  name: 'X (Twitter)',
+  img: "https://dl.ecomru.ru:9001/dev-images/xcom.svg",
+  id: 4
+}, {
+  name: 'Linkedin',
+  img: "https://dl.ecomru.ru:9001/dev-images/linkedin.svg",
+  id: 5
+}, {
+  name: 'Facebook',
+  img: "https://dl.ecomru.ru:9001/dev-images/facebook.svg",
+  id: 6
+}];
+var list_media = {
+  'facebook': 'facebook',
+  'dzen.ru': 'dzen',
+  'instagram.com': 'instagram',
+  'linkedin.com': 'linkedin',
+  'vc.ru': 'vc.ru',
+  'ok.ru': 'ok',
+  'pikabu.ru': 'pikabu',
+  't.me': 'telegram',
+  'vk.com': 'vk',
+  'whatsapp.com': 'whatsapp',
+  'x.com': 'x'
+};
+var ModalSelectionSocialMedia = exports.ModalSelectionSocialMedia = function ModalSelectionSocialMedia(_ref) {
+  var setIsModal = _ref.setIsModal,
+    _ref$activeLang = _ref.activeLang,
+    activeLang = _ref$activeLang === void 0 ? 'ru' : _ref$activeLang,
+    inputValue = _ref.inputValue,
+    setInputValue = _ref.setInputValue;
+  var current_list = activeLang == 'ru' ? social_list_rus : social_list_eng;
+  var _useState = (0, _react.useState)(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    insideValue = _useState2[0],
+    setInsideValue = _useState2[1];
+  var onChangeLink = function onChangeLink(e) {
+    setInsideValue(e);
+  };
+  var saveValue = function saveValue(value) {
+    var current;
+    for (var key in list_media) {
+      if (value.includes(key)) {
+        current = list_media[key];
+      }
+      if (current) {
+        setInputValue(_objectSpread(_objectSpread({}, inputValue), {}, _defineProperty({}, current, insideValue)));
+      }
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "modal-selection-social-media"
+  }, /*#__PURE__*/_react["default"].createElement(_InputDinamycPlaceholder["default"], {
+    placeholder: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0441\u0441\u044B\u043B\u043A\u0443",
+    onChange: function onChange(e) {
+      return onChangeLink(e);
+    },
+    size: "s"
+  }), /*#__PURE__*/_react["default"].createElement(_ButtonBasic["default"], {
+    green: true,
+    text: "+",
+    minWidth: "40px",
+    width: "40px",
+    size: "40px",
+    onClick: function onClick(e) {
+      saveValue(insideValue);
+      setIsModal(false);
+    }
+  }));
+};

package/dist/components/Article/SocialMedia/ModalSelectionSocialMedia/ModalSelectionSocialMedia.scss

@@ -0,0 +1,65 @@
+.modal-selection-social-media {
+    display: flex;
+    width: 100%;
+    gap: 12px;
+
+    &__title {
+        color: #2B2B46;
+        font-family: "Golos Text";
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 24px;
+        margin-left: auto;
+        margin-right: auto;
+        text-align: center;
+    }
+
+    &__content {
+        display: flex;
+        height: 100%;
+        width: 100%;
+        gap: 24px;
+        flex-wrap: wrap;
+    }
+
+    &__item-social {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        gap: 8px;
+        width: calc(50% - 12px);
+    }
+
+    &__info {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        overflow: hidden;
+
+        img {
+            width: 24px;
+            height: 24px;
+            object-fit: contain;
+        }
+    }
+
+    &__name-social {
+        color: #2B2B46;
+        font-family: "Golos Text";
+        font-size: 15px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 28px;
+        display: -webkit-box;
+        -webkit-line-clamp: 1; // количество строк
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        word-break: break-word;
+        hyphens: auto;
+    }
+
+    .btn-basic {
+        margin-top: auto;
+    }
+}

package/dist/components/Article/SocialMedia/ModalSelectionSocialMedia/img/Facebook.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="28" height="28" rx="4" fill="#0863F7"/>
+<path d="M15.0468 20.7476V14.6006H17.1205L17.4288 12.1939H15.0468V10.6609C15.0468 9.96638 15.2403 9.49088 16.237 9.49088H17.5V7.34513C16.8855 7.27928 16.2678 7.24748 15.6498 7.24988C13.8168 7.24988 12.5583 8.36888 12.5583 10.4231V12.1894H10.498V14.5961H12.5628V20.7476H15.0468Z" fill="white"/>
+</svg>

package/dist/components/Article/SocialMedia/ModalSelectionSocialMedia/img/OK.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="28" height="28" rx="4" fill="#FF7600"/>
+<path d="M13.9878 14.3125C11.3982 14.3125 9.24585 12.162 9.24585 9.61733C9.24585 6.98467 11.3982 4.83325 13.9887 4.83325C16.6672 4.83325 18.7306 6.98375 18.7306 9.61733C18.726 10.8668 18.2255 12.0633 17.339 12.9439C16.4526 13.8245 15.2528 14.3171 14.0034 14.3134L13.9878 14.3125ZM13.9878 7.59884C12.8914 7.59884 12.0573 8.52008 12.0573 9.61825C12.0573 10.7146 12.8914 11.5488 13.9887 11.5488C15.1299 11.5488 15.9201 10.7146 15.9201 9.61825C15.921 8.51917 15.1299 7.59884 13.9878 7.59884ZM15.8761 18.2193L18.5555 20.8089C19.0826 21.3782 19.0826 22.2123 18.5555 22.7394C17.9854 23.3087 17.1063 23.3087 16.6672 22.7394L13.9887 20.1058L11.3982 22.7394C11.1351 23.0025 10.7831 23.1336 10.3871 23.1336C10.08 23.1336 9.72894 23.0016 9.42094 22.7394C8.89385 22.2123 8.89385 21.3782 9.42094 20.808L12.1434 18.2184C11.1602 17.9273 10.2171 17.515 9.33569 16.991C8.6766 16.6399 8.54552 15.7627 8.8966 15.1036C9.33569 14.4454 10.1259 14.2703 10.8289 14.7094C11.781 15.2904 12.8747 15.5978 13.9901 15.5978C15.1054 15.5978 16.1991 15.2904 17.1512 14.7094C17.8543 14.2703 18.6875 14.4454 19.0826 15.1036C19.4786 15.7627 19.3017 16.639 18.6866 16.991C17.8534 17.5181 16.8872 17.9132 15.877 18.2203L15.8761 18.2193Z" fill="white"/>
+</svg>