-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
42 lines (39 loc) · 1.22 KB
/
index.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
import { createRoot } from 'react-dom/client'
import { Exmpl, Code, Button, Input, Grid, Tabs } from 'exmpl'
const usageCode = `import React from 'react'
import { createRoot } from 'react-dom/client'
import { Exmpl, Code } from 'exmpl'
createRoot(document.body).render(
<Exmpl title="exmpl Demo" npm="exmpl" github="tobua/exmpl">
<p>This is the introduction.</p>
<h2>Installation & Usage</h2>
<Code>{\`npm i exmpl\`}</Code>
</Exmpl>
)`
createRoot(document.body).render(
<Exmpl title="exmpl Demo" npm="exmpl" github="tobua/exmpl">
<p>React Components to quickly create a preview.</p>
<h2>Installation & Usage</h2>
<Code>{`npm i exmpl`}</Code>
<Code>{usageCode}</Code>
<h2>Elements</h2>
<h3>Button</h3>
<Button onClick={() => alert('Hello')}>Click me</Button>
<h3>Input</h3>
<Input placeholder="First name" />
<h3>50 / 50 Grid</h3>
<p>100 Grid below 750 pixel viewport.</p>
<Grid>
<p>Left</p>
<p>Right</p>
</Grid>
<h3>Tabs</h3>
<Tabs labels={['Options', 'Integration', 'Test Cases']}>
<p>Options content</p>
<p>Integration content</p>
<p>Test cases content</p>
</Tabs>
<h3>Code</h3>
<Code>{`npm i exmpl`}</Code>
</Exmpl>,
)