@yandex/ui
Version:
Yandex UI components
17 lines (16 loc) • 1.91 kB
JavaScript
import { __read } from "tslib";
import React, { useRef, useState } from 'react';
import { Button } from '@yandex-lego/components/Button/desktop/bundle';
import { Modal } from '@yandex-lego/components/Modal/desktop/bundle';
export var Playground = function () {
var scopeRef = useRef(null);
var _a = __read(useState(false), 2), visible = _a[0], setVisible = _a[1];
return (React.createElement("div", { ref: scopeRef, style: { height: 72 } },
React.createElement(Button, { view: "default", size: "m", onClick: function () { return setVisible(true); } }, "\u041E\u0442\u043A\u0440\u044B\u0442\u044C"),
React.createElement(Modal, { theme: "normal", scope: scopeRef, visible: visible, onClose: function () { return setVisible(false); } },
React.createElement("div", { style: { padding: 16, fontFamily: 'var(--control-font-family)', width: 400 } },
React.createElement("div", { style: { marginBottom: 16 } }, "\u041E\u0431\u0449\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u043D\u0430\u044F \u043C\u043D\u043E\u0433\u043E\u044F\u0437\u044B\u0447\u043D\u0430\u044F \u0443\u043D\u0438\u0432\u0435\u0440\u0441\u0430\u043B\u044C\u043D\u0430\u044F \u0438\u043D\u0442\u0435\u0440\u043D\u0435\u0442-\u044D\u043D\u0446\u0438\u043A\u043B\u043E\u043F\u0435\u0434\u0438\u044F \u0441\u043E \u0441\u0432\u043E\u0431\u043E\u0434\u043D\u044B\u043C \u043A\u043E\u043D\u0442\u0435\u043D\u0442\u043E\u043C."),
React.createElement("div", { style: { display: 'flex', justifyContent: 'flex-end' } },
React.createElement(Button, { view: "clear", size: "m", onClick: function () { return setVisible(false); } }, "\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C"),
React.createElement(Button, { view: "default", size: "m", onClick: function () { return setVisible(false); } }, "\u0425\u043E\u0440\u043E\u0448\u043E"))))));
};