-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.tsx
63 lines (61 loc) · 1.97 KB
/
example.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
import * as React from 'react';
import {createRoot} from 'react-dom/client';
import {HashRouter as Router,Routes, Route, NavLink,} from 'react-router-dom';
import ButtonExample from './lib/button.example';
import DialogExample from './lib/dialog/dialog.example';
import LayoutExample from './lib/layout/layout.example';
import FormExample from './lib/form/form.example';
import {Layout, Header, Footer, Aside, Content} from "./lib/layout/layout"
import './example.scss'
import IconDemo from './lib/icon/icon.demo';
const logo = require("./logo.png")
console.log('logo')
console.log(logo)
const rootElement = document.getElementById('root');
const root = createRoot(rootElement!);
root.render(
<Router>
<Layout className="site-page">
<Header className="site-header" >
<div className="logo">
<img src={logo} width="48" height="48" alt=""/>
<span> Sui-react </span>
</div>
</Header>
<Layout>
<Aside className="site-aside">
<h2>Component</h2>
<ul>
<li>
<NavLink to='icon'>Icon</NavLink>
</li>
<li>
<NavLink to='button'>Button</NavLink>
</li>
<li>
<NavLink to='dialog'>Dialog</NavLink>
</li>
<li>
<NavLink to='layout'>Layout</NavLink>
</li>
<li>
<NavLink to='form'>Form</NavLink>
</li>
</ul>
</Aside>
<Content className="site-main">
<Routes>
<Route path='/icon' element={<IconDemo/> }/>
<Route path='/button' element={<ButtonExample/>}/>
<Route path='/dialog' element={<DialogExample/>}/>
<Route path='layout' element={<LayoutExample/>}/>
<Route path='form' element={<FormExample/>}/>
</Routes>
</Content>
</Layout>
<Footer className="site-footer">
© 2022 Steve
</Footer>
</Layout>
</Router>
);