muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00
Code Packages Activity Actions

fixed inputs

Browse source
This commit is contained in:
Fedor Katurov 2022-01-04 17:36:05 +07:00
parent 6e89271ea9
commit 811e14fd4c
29 changed files with 566 additions and 901 deletions
Download patch file Download diff file Expand all files Collapse all files

88
src/components/boris/BorisUIDemo/index.tsx
View file

@ -1,4 +1,4 @@
import React, { FC } from 'react';
import React, { FC, useState } from 'react';
import { Card } from '~/components/containers/Card';
import styles from './styles.module.scss';
import markdown from '~/styles/common/markdown.module.scss';
@ -8,53 +8,59 @@ import { InputText } from '~/components/input/InputText';
interface IProps {}
const BorisUIDemo: FC<IProps> = () => (
<Card className={styles.card}>
<div className={markdown.wrapper}>
<h1>UI</h1>
<p>
Простая демонстрация элементов интерфейса. Используется, в основном, как подсказка при
разработке
</p>
const BorisUIDemo: FC<IProps> = () => {
const [text, setText] = useState('');
<h2>Инпуты</h2>
return (
<Card className={styles.card}>
<div className={markdown.wrapper}>
<h1>UI</h1>
<p>
Простая демонстрация элементов интерфейса. Используется, в основном, как подсказка при
разработке
</p>
<form autoComplete="off">
<InputText title="Обычный инпут" />
<InputText title="Инпут с ошибкой" error="Ошибка" />
<InputText title="Пароль" type="password" />
</form>
<h2>Инпуты</h2>
<h2>Кнопки</h2>
<form autoComplete="off">
<Group>
<InputText title="Обычный инпут" handler={setText} value={text} />
<InputText title="Инпут с ошибкой" error="Ошибка" handler={setText} value={text} />
<InputText title="Пароль" type="password" handler={setText} value={text} />
</Group>
</form>
<h4>Цвета</h4>
<h2>Кнопки</h2>
<Group horizontal className={styles.sample}>
<Button>Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="outline">Outline</Button>
<Button color="gray">Gray</Button>
<Button color="link">Link</Button>
</Group>
<h4>Цвета</h4>
<h4>Размеры</h4>
<Group horizontal className={styles.sample}>
<Button>Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="outline">Outline</Button>
<Button color="gray">Gray</Button>
<Button color="link">Link</Button>
</Group>
<Group horizontal className={styles.sample}>
<Button size="micro">Micro</Button>
<Button size="mini">Mini</Button>
<Button size="normal">Normal</Button>
<Button size="big">Big</Button>
<Button size="giant">Giant</Button>
</Group>
<h4>Размеры</h4>
<h4>Варианты</h4>
<Group horizontal className={styles.sample}>
<Button iconRight="check">iconRight</Button>
<Button iconLeft="send">iconLeft</Button>
<Button round>Round</Button>
</Group>
</div>
</Card>
);
<Group horizontal className={styles.sample}>
<Button size="micro">Micro</Button>
<Button size="mini">Mini</Button>
<Button size="normal">Normal</Button>
<Button size="big">Big</Button>
<Button size="giant">Giant</Button>
</Group>
<h4>Варианты</h4>
<Group horizontal className={styles.sample}>
<Button iconRight="check">iconRight</Button>
<Button iconLeft="send">iconLeft</Button>
<Button round>Round</Button>
</Group>
</div>
</Card>
);
};
export { BorisUIDemo };