collaborative-ui
Version:
React component library for building real-time collaborative editing applications.
39 lines (38 loc) • 2.48 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Landing = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Space_1 = require("nice-ui/lib/3-list-item/Space");
const Text_1 = require("nice-ui/lib/1-inline/Text");
const use_t_1 = require("use-t");
const MiniTitle_1 = require("nice-ui/lib/3-list-item/MiniTitle");
const DemoSelect_1 = require("./DemoSelect");
const react_use_1 = require("react-use");
const Input_1 = require("nice-ui/lib/2-inline-block/Input");
const Button_1 = require("nice-ui/lib/2-inline-block/Button");
const FixedColumn_1 = require("nice-ui/lib/3-list-item/FixedColumn");
const Landing = ({ state: _state }) => {
const [t] = (0, use_t_1.useT)();
const { width } = (0, react_use_1.useWindowSize)();
const isSmall = width < 800;
const formWidth = Math.max(300, Math.min(400, width - 64));
return (React.createElement("div", { style: { display: 'flex', width: '100%', alignItems: 'center', flexDirection: 'column' } },
React.createElement(Text_1.Text, { as: 'h1', size: 16, font: "sans", kind: "bold", style: { textAlign: 'center', margin: '64px 0' } }, t('Live demos')),
React.createElement("div", { style: { maxWidth: formWidth, width: '100%' } },
React.createElement(MiniTitle_1.MiniTitle, null, t('New')),
React.createElement(Space_1.Space, { size: -1 }),
React.createElement(DemoSelect_1.DemoSelect, { width: formWidth }),
React.createElement(Space_1.Space, { size: 8 }),
React.createElement(MiniTitle_1.MiniTitle, null, t('Open')),
React.createElement(Space_1.Space, { size: -2 }),
React.createElement(FixedColumn_1.FixedColumn, { right: 128 },
React.createElement("div", null,
React.createElement(Space_1.Space, { size: -1 }),
React.createElement(Input_1.Input, { label: 'Link or ID', value: '', onChange: (value) => { } }),
React.createElement(Space_1.Space, { size: 0 }),
React.createElement(Button_1.Button, { block: true, icon: React.createElement("span", null, "\uD83D\uDE80") }, t('Open'))),
React.createElement("div", { style: { paddingLeft: 16 } },
React.createElement(Text_1.Text, { as: 'p', size: -2 }, t('Enter a link or ID of the document you want to open.')))))));
};
exports.Landing = Landing;