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
|
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { makeStyles, Button, Typography } from '@material-ui/core';
import {
BenzinThemeProvider,
Header,
Window,
ContentSection,
SmartList,
} 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 Icon = <img src={icon} width="32px" height="37px" alt="logo"/>
const headerContents = {
home: null,
page: null,
'another page': null,
};
const renderItem: React.FC<RenderPropTypes> = ({ index, style}) => {
return (
<Typography variant="h3" style={style} component="div"> {index} </Typography>
);
};
const App: React.FC = () => {
const classes = useStyles();
const [page, setPage] = useState('home');
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.
</p>
<Button variant="contained" color="secondary">
secondary
</Button>
<Button variant="contained" color="primary">
primary
</Button>
</ContentSection>
</div>
</Window>
<Window type="secondary" name="SmartList test window">
<SmartList
itemSize={270}
itemCount={100}
renderItem={renderItem}
/>
</Window>
</BenzinThemeProvider>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
|
