@yandex/ui
Version:
Yandex UI components
51 lines (50 loc) • 4.88 kB
JavaScript
import { __assign } from "tslib";
import React from 'react';
import { Header, HeaderSearch, Logoaas } from '@yandex-lego/components/Header/desktop';
import { withViewSearchArrow } from '@yandex-lego/components/Header/Button';
import { Button, withSizeM, withViewClear } from '@yandex-lego/components/Button/desktop';
import { Textinput, withHasClear } from '@yandex-lego/components/Textinput/desktop';
import { withViewSearchArrow as withViewSearchArrowTextinput } from '@yandex-lego/components/Header/Textinput';
import { UserPic } from '@yandex-lego/components/UserPic/desktop/bundle';
import { User2Vanilla } from '@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 = withViewSearchArrow(Button);
var SearchInput = withHasClear(withViewSearchArrowTextinput(Textinput));
var ButtonZen = withViewClear(withSizeM(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";
export var ZenVideo = function () {
return (React.createElement(React.Fragment, null,
React.createElement("style", null, styles),
React.createElement("div", { className: "DarkHeader" },
React.createElement(Header, { className: "SearchHeader", logo: React.createElement(React.Fragment, null,
React.createElement(Logoaas, { color: "fff", size: 33 }),
React.createElement(Logoaas, { color: "fff", name: "\u0412\u0438\u0434\u0435\u043E", size: 33 })), actions: React.createElement(React.Fragment, null,
React.createElement(ButtonZen, { size: "m", iconRight: function () { return (React.createElement("div", { className: "ExampleIcon" })); }, view: "clear" }, "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C"),
React.createElement(UserPic, { plus: true, size: "s", avatarId: "43978/351415393-30646433" })) },
React.createElement(HeaderSearch, { action: "//yandex.ru/search" },
React.createElement(SearchInput, { view: "search-arrow", name: "text", value: "\u041F\u0440\u0438\u043C\u0435\u0440 \u0441 UserPic \u0438\u0437 lego/components" }),
React.createElement(SearchButton, { view: "search-arrow" }, "\u041D\u0430\u0439\u0442\u0438"))),
React.createElement(Header, { className: "SearchHeader", logo: React.createElement(React.Fragment, null,
React.createElement(Logoaas, { color: "fff", size: 33 }),
React.createElement(Logoaas, { color: "fff", name: "\u0412\u0438\u0434\u0435\u043E", size: 33 })), actions: React.createElement(React.Fragment, null,
React.createElement(Button, null),
React.createElement(User2Vanilla, __assign({}, userProps))) },
React.createElement(HeaderSearch, { action: "//yandex.ru/search" },
React.createElement(SearchInput, { view: "search-arrow", name: "text", value: "\u041F\u0440\u0438\u043C\u0435\u0440 \u0441 user2 \u0438\u0437 serp-header" }),
React.createElement(SearchButton, { view: "search-arrow" }, "\u041D\u0430\u0439\u0442\u0438"))))));
};