/
pdf-viewer-blank-page.tsx
50 lines (46 loc) · 1.82 KB
/
pdf-viewer-blank-page.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
import ReactDOM from 'react-dom/client';
import { Button } from '../../button';
import { Icon } from '../../icon';
import { Upload } from '../../upload';
import { Toolbar } from '../../toolbar';
import { Pager } from '../../pager';
const root = ReactDOM.createRoot(
document.getElementById('app') as HTMLElement
);
const styles = `
#test-area .k-pdf-viewer {
height: 600px;
}
.k-dropzone {
gap: 8px;
}
`;
root.render(
<>
<style>{styles}</style>
<div id="test-area" className="k-d-grid k-grid-cols-1">
<div className="k-widget k-pdf-viewer">
<Toolbar resizable>
<Pager type="input" pageSizes={false} refresh={false} info={false} />
<span className="k-spacer"></span>
<Button fillMode="flat" icon="file-pdf"></Button>
<Button fillMode="flat" icon="print"></Button>
<Button fillMode="flat" icon="fullscreen"></Button>
</Toolbar>
<div className="k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto">
<div className="k-pdf-viewer-pages">
<div className="k-page k-blank-page">
<div className="k-external-dropzone">
<div className="k-dropzone-inner">
<Icon icon="upload" className="k-dropzone-icon" size="xxxlarge" />
<span className="k-dropzone-hint">Drag and drop files here to upload</span>
</div>
</div>
<Upload async empty status="upload"></Upload>
</div>
</div>
</div>
</div>
</div>
</>
);