@yandex/ui
Version:
Yandex UI components
55 lines (54 loc) • 5.39 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ZenVideo = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var desktop_1 = require("@yandex-lego/components/Header/desktop");
var Button_1 = require("@yandex-lego/components/Header/Button");
var desktop_2 = require("@yandex-lego/components/Button/desktop");
var desktop_3 = require("@yandex-lego/components/Textinput/desktop");
var Textinput_1 = require("@yandex-lego/components/Header/Textinput");
var bundle_1 = require("@yandex-lego/components/UserPic/desktop/bundle");
var User2_1 = require("@yandex-lego/serp-header/User2");
var userProps = {
uid: 1,
name: '',
avatarId: '20706/226291201-19837531',
avatarUrl: {
low: 'https://avatars.mds.yandex.net/get-yapic/26057/lxSElH10aKDc5jbQnXcIGCkFk-1/islands-middle',
high: 'https://avatars.mds.yandex.net/get-yapic/26057/lxSElH10aKDc5jbQnXcIGCkFk-1/islands-retina-middle',
},
yu: 123,
bundleKey: 'move-to-header',
helpUrl: '//yandex.ru/support/mail',
customMenuItems: [{ text: 'Кастомный айтем', url: '//yandex.ru', action: 'custom' }],
tld: 'ru',
lang: 'ru',
platform: 'desktop',
};
var SearchButton = Button_1.withViewSearchArrow(desktop_2.Button);
var SearchInput = desktop_3.withHasClear(Textinput_1.withViewSearchArrow(desktop_3.Textinput));
var ButtonZen = desktop_2.withViewClear(desktop_2.withSizeM(desktop_2.Button));
var styles = "\n .SearchHeader {\n --header-content-height: 55px;\n --header-logo-indent-right: 0;\n --header-search-indent-left: 0;\n --header-content-indent-right: 0;\n --header-actions-space-left: 0;\n }\n\n .SearchHeader .YandexHeader-Logoaas,\n .SearchHeader .YandexHeader-Logo {\n width: 80px;\n height: 35px;\n background-position-x: 0;\n }\n\n .SearchHeader .YandexHeader-Logoaas .Image {\n margin-left: 0;\n }\n\n .DarkHeader {\n --button-view-clear-typo-color-base: #fff;\n --header-fill-color: #1c1d28;\n --header-search-fill-color-base: #292b3b;\n --header-search-fill-color-hover: #373a50;\n --header-search-button-typo-color: #888994;\n --header-search-textinput-typo-color: #fff;\n --header-search-textinput-fill-color: #1c1d28;\n }\n\n .ExampleIcon {\n width: 20px;\n height: 20px;\n font-size: 15px;\n line-height: 20px;\n border-radius: 50%;\n text-align: center;\n background-color: #373a50;\n opacity: 1;\n display: inline-block;\n vertical-align: baseline;\n color: #fff;\n }\n\n .ExampleIcon::before {\n content: \"+\";\n }\n";
var ZenVideo = function () {
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("style", null, styles),
react_1.default.createElement("div", { className: "DarkHeader" },
react_1.default.createElement(desktop_1.Header, { className: "SearchHeader", logo: react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(desktop_1.Logoaas, { color: "fff", size: 33 }),
react_1.default.createElement(desktop_1.Logoaas, { color: "fff", name: "\u0412\u0438\u0434\u0435\u043E", size: 33 })), actions: react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(ButtonZen, { size: "m", iconRight: function () { return (react_1.default.createElement("div", { className: "ExampleIcon" })); }, view: "clear" }, "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C"),
react_1.default.createElement(bundle_1.UserPic, { plus: true, size: "s", avatarId: "43978/351415393-30646433" })) },
react_1.default.createElement(desktop_1.HeaderSearch, { action: "//yandex.ru/search" },
react_1.default.createElement(SearchInput, { view: "search-arrow", name: "text", value: "\u041F\u0440\u0438\u043C\u0435\u0440 \u0441 UserPic \u0438\u0437 lego/components" }),
react_1.default.createElement(SearchButton, { view: "search-arrow" }, "\u041D\u0430\u0439\u0442\u0438"))),
react_1.default.createElement(desktop_1.Header, { className: "SearchHeader", logo: react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(desktop_1.Logoaas, { color: "fff", size: 33 }),
react_1.default.createElement(desktop_1.Logoaas, { color: "fff", name: "\u0412\u0438\u0434\u0435\u043E", size: 33 })), actions: react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(desktop_2.Button, null),
react_1.default.createElement(User2_1.User2Vanilla, tslib_1.__assign({}, userProps))) },
react_1.default.createElement(desktop_1.HeaderSearch, { action: "//yandex.ru/search" },
react_1.default.createElement(SearchInput, { view: "search-arrow", name: "text", value: "\u041F\u0440\u0438\u043C\u0435\u0440 \u0441 user2 \u0438\u0437 serp-header" }),
react_1.default.createElement(SearchButton, { view: "search-arrow" }, "\u041D\u0430\u0439\u0442\u0438"))))));
};
exports.ZenVideo = ZenVideo;