@yandex/ui/esm/MessageBox/__examples__/complex.js

Yandex UI components

import React from 'react';
import { Button } from '@yandex-lego/components/Button/desktop/bundle';
import { MessageBox, Wrapper } from '@yandex-lego/components/MessageBox/desktop/bundle';
import { Spin } from '@yandex-lego/components/Spin/bundle';
import { Progress } from '@yandex-lego/components/Progress';
import { cnTheme } from '@yandex-lego/components/Theme';
import { theme as brandTheme } from '@yandex-lego/components/Theme/presets/brand';
export var Complex = function () { return (React.createElement(React.Fragment, null,
    React.createElement("div", { style: { padding: '16px' } },
        React.createElement(MessageBox, { size: "l", view: "default", onClose: function () { }, background: React.createElement("img", { style: { filter: 'opacity(.5)', width: '100%' }, src: "//jing.yandex-team.ru/files/axaxaman/catalogue-banner-x3.jpeg" }) },
            React.createElement(Wrapper, null,
                React.createElement("p", null, "\u041D\u0430\u0432\u044B\u043A \u0434\u043D\u044F"),
                React.createElement("h1", null, "\u0420\u0430\u0437\u0432\u0438\u0432\u0430\u0439\u0442\u0435 \u0440\u0435\u0447\u044C \u0440\u0435\u0431\u0435\u043D\u043A\u0430"),
                React.createElement("p", null, "\u0422\u0440\u0435\u043D\u0430\u0436\u0435\u0440 \u0434\u043B\u044F \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044F \u0440\u0435\u0447\u0438")))),
    React.createElement("div", { style: { padding: '16px' } },
        React.createElement(MessageBox, { view: "default", background: React.createElement(Progress, { style: { height: '100%', backgroundColor: '#2196f3' }, value: 0.65 }) },
            React.createElement(Wrapper, { leading: React.createElement("span", { className: cnTheme(brandTheme) },
                    React.createElement(Spin, { view: "default", size: "xs", progress: true })), trailing: React.createElement(Button, { view: "clear", size: "s" }, "\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C") },
                React.createElement("b", null, "\u0417\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043E 35 \u0438\u0437 54 \u0444\u0430\u0439\u043B\u043E\u0432"),
                React.createElement("br", null),
                "\u041E\u0441\u0442\u0430\u043B\u043E\u0441\u044C 1 \u0447\u0430\u0441 30 \u043C\u0438\u043D\u0443\u0442"))))); };