/
Component.tsx
71 lines (59 loc) · 1.94 KB
/
Component.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import { observer } from 'mobx-react';
import { Container, Table } from 'react-bootstrap';
import { Editor } from 'react-bootstrap-editor';
import {
TimeDistance,
TableSpinner,
Icon,
Avatar,
Nameplate,
EditorHTML
} from 'idea-react';
import { TSXSample } from '../component/TSXSample';
import EditorJS from '../component/Editor';
import RichEditData from '../model/rich-edit.json';
import { i18n } from '../model/Translation';
Table.displayName = 'Table';
const { t } = i18n;
export const ComponentPage = observer(() => (
<Container className="my-3" fluid="md">
<h1>{t('component')}</h1>
<TSXSample title="Time Distance">
<TimeDistance date="1989-06-04" />
</TSXSample>
<TSXSample title="Icon">
<Icon name="bootstrap" size={2} />
</TSXSample>
<TSXSample title="Avatar">
<Avatar src="https://github.com/idea2app.png" />
</TSXSample>
<TSXSample title="Nameplate">
<Nameplate
avatar="https://github.com/idea2app.png"
name="idea2app"
/>
</TSXSample>
<TSXSample title="Table spinner">
<Table className="text-center" striped hover>
<thead>
<tr>
<th>#</th>
<th>Content</th>
</tr>
</thead>
<tbody>
<TableSpinner colSpan={2} />
</tbody>
</Table>
</TSXSample>
<TSXSample title="Rich-text editor (HTML)">
<Editor defaultValue="<p>test</p>" onChange={console.log} />
</TSXSample>
<TSXSample title="Rich-text editor (JSON)">
<EditorJS name="content" defaultValue={RichEditData} />
</TSXSample>
<TSXSample title="Editor HTML">
<EditorHTML data={RichEditData} />
</TSXSample>
</Container>
));