@yandex/ui
Version:
Yandex UI components
53 lines (52 loc) • 6.1 kB
JavaScript
import { __assign, __rest } from "tslib";
import React from 'react';
import { Textinput } from '@yandex-lego/components/Textinput/desktop/bundle';
import { Icon } from '@yandex-lego/components/Icon/bundle';
import { Text } from '@yandex-lego/components/Text/bundle';
import { ListTile } from '@yandex-lego/components/ListTile';
import { Spacer } from '@yandex-lego/components/Spacer';
var IconCross = function (_a) {
var style = _a.style, props = __rest(_a, ["style"]);
return (React.createElement(Icon, __assign({ glyph: "type-cross", style: __assign(__assign({}, style), { width: 24, height: 24 }) }, props)));
};
export var MiniApps = function () {
return (React.createElement("div", { style: {
display: 'grid',
gridTemplateColumns: 'repeat(3, 1fr)',
gridGap: '1rem',
} }, [undefined, 'filled', 'outlined'].map(function (variant, idx) { return (React.createElement("div", { key: idx },
React.createElement("div", null,
React.createElement(Text, { as: "h3", typography: "body-short-xl", color: "secondary" }, "\u0411\u0435\u0437 \u043B\u0435\u0439\u0431\u043B\u0430"),
React.createElement(Textinput, { view: "material", variant: variant })),
React.createElement("div", null,
React.createElement(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.createElement(Textinput, { view: "material", variant: variant, iconLeft: React.createElement(IconCross, null), iconRight: React.createElement(IconCross, null) })),
React.createElement("div", null,
React.createElement(Text, { as: "h3", typography: "body-short-xl", color: "secondary" }, "\u041F\u0443\u0441\u0442\u043E\u0435 \u043F\u043E\u043B\u0435"),
React.createElement(Textinput, { view: "material", variant: variant, label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A" })),
React.createElement("div", null,
React.createElement(Text, { as: "h3", typography: "body-short-xl", color: "secondary" }, "\u041F\u0443\u0441\u0442\u043E\u0435 \u043F\u043E\u043B\u0435"),
React.createElement(Textinput, { view: "material", variant: variant, label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A", iconLeft: React.createElement(IconCross, null), iconRight: React.createElement(IconCross, null) })),
React.createElement("div", null,
React.createElement(Text, { as: "h3", typography: "body-short-xl", color: "secondary" }, "\u0417\u0430\u043F\u043E\u043B\u043D\u0435\u043D\u043D\u043E\u0435"),
React.createElement(Textinput, { view: "material", variant: variant, label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A", defaultValue: "\u0422\u0435\u043A\u0441\u0442", iconLeft: React.createElement(IconCross, null), iconRight: React.createElement(IconCross, null) })),
React.createElement("div", null,
React.createElement(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.createElement(Spacer, { left: 16 },
React.createElement(ListTile, { alignItems: "center", leftSpace: "m", leading: React.createElement(IconCross, { style: {
color: 'rgba(0, 0, 0, 0.8)',
} }) },
React.createElement(Textinput, { view: "material", variant: variant, label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A", defaultValue: "\u0422\u0435\u043A\u0441\u0442", iconRight: React.createElement(IconCross, null) })))),
React.createElement("div", null,
React.createElement(Text, { as: "h3", typography: "body-short-xl", color: "secondary" }, "\u0421 \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u043E\u0439"),
React.createElement(Textinput, { view: "material", variant: variant, label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A", defaultValue: "\u0422\u0435\u043A\u0441\u0442", iconLeft: React.createElement(IconCross, null), iconRight: React.createElement(IconCross, null), hint: "\u041F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0430" })),
React.createElement("div", null,
React.createElement(Text, { as: "h3", typography: "body-short-xl", color: "secondary" }, "\u0421 \u043E\u0448\u0438\u0431\u043A\u043E\u0439"),
React.createElement(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.createElement(IconCross, null), iconRight: React.createElement(IconCross, null), hint: "\u041F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0430" })),
React.createElement("div", null,
React.createElement(Text, { as: "h3", typography: "body-short-xl", color: "secondary" }, "\u0412\u044B\u043A\u043B\u044E\u0447\u0435\u043D\u043D\u043E\u0435"),
React.createElement(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.createElement(IconCross, null), iconRight: React.createElement(IconCross, null) })),
React.createElement("div", null,
React.createElement(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.createElement(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.createElement(IconCross, null), iconRight: React.createElement(IconCross, null), hint: "\u041F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0430" })))); })));
};