@yandex/ui
Version:
Yandex UI components
57 lines (56 loc) • 7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MiniApps = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var bundle_1 = require("@yandex-lego/components/Textinput/desktop/bundle");
var bundle_2 = require("@yandex-lego/components/Icon/bundle");
var bundle_3 = require("@yandex-lego/components/Text/bundle");
var ListTile_1 = require("@yandex-lego/components/ListTile");
var Spacer_1 = require("@yandex-lego/components/Spacer");
var IconCross = function (_a) {
var style = _a.style, props = tslib_1.__rest(_a, ["style"]);
return (react_1.default.createElement(bundle_2.Icon, tslib_1.__assign({ glyph: "type-cross", style: tslib_1.__assign(tslib_1.__assign({}, style), { width: 24, height: 24 }) }, props)));
};
var MiniApps = function () {
return (react_1.default.createElement("div", { style: {
display: 'grid',
gridTemplateColumns: 'repeat(3, 1fr)',
gridGap: '1rem',
} }, [undefined, 'filled', 'outlined'].map(function (variant, idx) { return (react_1.default.createElement("div", { key: idx },
react_1.default.createElement("div", null,
react_1.default.createElement(bundle_3.Text, { as: "h3", typography: "body-short-xl", color: "secondary" }, "\u0411\u0435\u0437 \u043B\u0435\u0439\u0431\u043B\u0430"),
react_1.default.createElement(bundle_1.Textinput, { view: "material", variant: variant })),
react_1.default.createElement("div", null,
react_1.default.createElement(bundle_3.Text, { as: "h3", typography: "body-short-xl", color: "secondary" }, "\u0411\u0435\u0437 \u043B\u0435\u0439\u0431\u043B\u0430 c \u0438\u043A\u043E\u043D\u043A\u0430\u043C\u0438"),
react_1.default.createElement(bundle_1.Textinput, { view: "material", variant: variant, iconLeft: react_1.default.createElement(IconCross, null), iconRight: react_1.default.createElement(IconCross, null) })),
react_1.default.createElement("div", null,
react_1.default.createElement(bundle_3.Text, { as: "h3", typography: "body-short-xl", color: "secondary" }, "\u041F\u0443\u0441\u0442\u043E\u0435 \u043F\u043E\u043B\u0435"),
react_1.default.createElement(bundle_1.Textinput, { view: "material", variant: variant, label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A" })),
react_1.default.createElement("div", null,
react_1.default.createElement(bundle_3.Text, { as: "h3", typography: "body-short-xl", color: "secondary" }, "\u041F\u0443\u0441\u0442\u043E\u0435 \u043F\u043E\u043B\u0435"),
react_1.default.createElement(bundle_1.Textinput, { view: "material", variant: variant, label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A", iconLeft: react_1.default.createElement(IconCross, null), iconRight: react_1.default.createElement(IconCross, null) })),
react_1.default.createElement("div", null,
react_1.default.createElement(bundle_3.Text, { as: "h3", typography: "body-short-xl", color: "secondary" }, "\u0417\u0430\u043F\u043E\u043B\u043D\u0435\u043D\u043D\u043E\u0435"),
react_1.default.createElement(bundle_1.Textinput, { view: "material", variant: variant, label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A", defaultValue: "\u0422\u0435\u043A\u0441\u0442", iconLeft: react_1.default.createElement(IconCross, null), iconRight: react_1.default.createElement(IconCross, null) })),
react_1.default.createElement("div", null,
react_1.default.createElement(bundle_3.Text, { as: "h3", typography: "body-short-xl", color: "secondary" }, "\u0417\u0430\u043F\u043E\u043B\u043D\u0435\u043D\u043D\u043E\u0435 c ListTile \u0438 Spacer"),
react_1.default.createElement(Spacer_1.Spacer, { left: 16 },
react_1.default.createElement(ListTile_1.ListTile, { alignItems: "center", leftSpace: "m", leading: react_1.default.createElement(IconCross, { style: {
color: 'rgba(0, 0, 0, 0.8)',
} }) },
react_1.default.createElement(bundle_1.Textinput, { view: "material", variant: variant, label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A", defaultValue: "\u0422\u0435\u043A\u0441\u0442", iconRight: react_1.default.createElement(IconCross, null) })))),
react_1.default.createElement("div", null,
react_1.default.createElement(bundle_3.Text, { as: "h3", typography: "body-short-xl", color: "secondary" }, "\u0421 \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u043E\u0439"),
react_1.default.createElement(bundle_1.Textinput, { view: "material", variant: variant, label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A", defaultValue: "\u0422\u0435\u043A\u0441\u0442", iconLeft: react_1.default.createElement(IconCross, null), iconRight: react_1.default.createElement(IconCross, null), hint: "\u041F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0430" })),
react_1.default.createElement("div", null,
react_1.default.createElement(bundle_3.Text, { as: "h3", typography: "body-short-xl", color: "secondary" }, "\u0421 \u043E\u0448\u0438\u0431\u043A\u043E\u0439"),
react_1.default.createElement(bundle_1.Textinput, { state: "error", view: "material", variant: variant, label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A", defaultValue: "\u0422\u0435\u043A\u0441\u0442", iconLeft: react_1.default.createElement(IconCross, null), iconRight: react_1.default.createElement(IconCross, null), hint: "\u041F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0430" })),
react_1.default.createElement("div", null,
react_1.default.createElement(bundle_3.Text, { as: "h3", typography: "body-short-xl", color: "secondary" }, "\u0412\u044B\u043A\u043B\u044E\u0447\u0435\u043D\u043D\u043E\u0435"),
react_1.default.createElement(bundle_1.Textinput, { disabled: true, view: "material", variant: variant, label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A", defaultValue: "\u0422\u0435\u043A\u0441\u0442", iconLeft: react_1.default.createElement(IconCross, null), iconRight: react_1.default.createElement(IconCross, null) })),
react_1.default.createElement("div", null,
react_1.default.createElement(bundle_3.Text, { as: "h3", typography: "body-short-xl", color: "secondary" }, "\u0412\u044B\u043A\u043B\u044E\u0447\u0435\u043D\u043D\u043E\u0435 \u0441 \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u043E\u0439"),
react_1.default.createElement(bundle_1.Textinput, { disabled: true, view: "material", variant: variant, label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A", defaultValue: "\u0422\u0435\u043A\u0441\u0442", iconLeft: react_1.default.createElement(IconCross, null), iconRight: react_1.default.createElement(IconCross, null), hint: "\u041F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0430" })))); })));
};
exports.MiniApps = MiniApps;