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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { makeStyles, Link } from '@material-ui/core';
import {
BenzinThemeProvider,
Header,
Window,
ContentSection,
SmartList,
Button,
Markdown,
} from './lib';
import icon from './assets/icon.svg';
interface RenderPropTypes {
index: number;
style: React.CSSProperties;
}
const useStyles = makeStyles(theme => ({
window: {
padding: theme.spacing(4),
}
}));
const data = "# Getting started\n## Installation \nGo and install it \n# Development\nMore info on dev";
const Icon = <img src={icon} width="32px" height="37px" alt="logo"/>
const headerContents = {
home: null,
page: null,
'another page': null,
};
const App: React.FC = () => {
const classes = useStyles();
const [page, setPage] = useState('home');
const renderItem: React.FC<RenderPropTypes> = ({ index, style}) => {
return (
<div style={style} className={classes.window}>
<ContentSection sectionName={`Item ${index+1}`}>
<p>
Fusce commodo. Vestibulum convallis, lorem a tempus semper, dui dui euismod elit, vitae placerat urna tortor vitae lacus. Nullam libero mauris, consequat quis, varius et, dictum id, arcu. Mauris mollis tincidunt felis.
</p>
{(index % 2 === 0)?
(
<Button color="primary">
primary
</Button>
)
:
(
<Button color="secondary">
secondary
</Button>
)
}
</ContentSection>
</div>
);
};
return (
<BenzinThemeProvider>
<Header
logo={{
icon: Icon,
title: 'BENZIN',
}}
contents={headerContents}
page={page}
setPage={setPage}
/>
<Window type="primary">
<div className={classes.window}>
<ContentSection sectionName="Library preview">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque dapibus suscipit ligula. Donec posuere augue in quam. Etiam vel tortor sodales tellus ultricies commodo. Suspendisse potenti. Aenean in sem ac leo mollis blandit. Donec neque quam, dignissim in, mollis nec, sagittis eu, wisi. <Link href="#">Phasellus lacus.</Link> Etiam laoreet quam sed arcu. Phasellus at dui in ligula mollis ultricies. Integer placerat tristique nisl. Praesent augue. Fusce commodo.
</p>
<Button color="secondary">
secondary
</Button>
<Button color="primary">
primary
</Button>
</ContentSection>
<Markdown data={data} />
</div>
</Window>
<Window type="secondary" name="SmartList preview window">
<SmartList
itemSize={270}
itemCount={100}
renderItem={renderItem}
/>
</Window>
</BenzinThemeProvider>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
|
