72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
|
import React from "react";
|
||
|
|
import "../index";
|
||
|
|
import {Checkbox} from "../src/Components/Forms/Checkbox";
|
||
|
|
import { Radio } from "../src/Components/Forms/Radio";
|
||
|
|
|
||
|
|
export function DemoApp()
|
||
|
|
{
|
||
|
|
return (
|
||
|
|
<div className={"app"}>
|
||
|
|
<h1>KernelUI</h1>
|
||
|
|
|
||
|
|
<h2>Headings</h2>
|
||
|
|
|
||
|
|
<h1>Demo app</h1>
|
||
|
|
|
||
|
|
<h2>Second title</h2>
|
||
|
|
|
||
|
|
<h3>Third title</h3>
|
||
|
|
|
||
|
|
<h4>Fourth title</h4>
|
||
|
|
|
||
|
|
<h5>Fifth title</h5>
|
||
|
|
|
||
|
|
<h6>Sixth title</h6>
|
||
|
|
|
||
|
|
<h2>Buttons</h2>
|
||
|
|
|
||
|
|
<button type={"button"}>A cool button</button>
|
||
|
|
<a className={"button"} href={"#"}>A link button</a>
|
||
|
|
<button type={"button"} className={"flat"}>A flat button</button>
|
||
|
|
<button type={"button"} className={"validation"}>A validation button</button>
|
||
|
|
<button type={"button"} className={"cancel"}>A cancellation button</button>
|
||
|
|
<button type={"button"} className={"delete"}>A deletion button</button>
|
||
|
|
|
||
|
|
<h2>Forms</h2>
|
||
|
|
|
||
|
|
<form>
|
||
|
|
<label>
|
||
|
|
Text label <span className={"required"}></span>
|
||
|
|
<input type={"text"} placeholder={"Normal demo text"}/>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<label>
|
||
|
|
Textarea label <span className={"required"}></span>
|
||
|
|
<textarea placeholder={"A normal textarea."}></textarea>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<Checkbox>Checkbox demo</Checkbox>
|
||
|
|
<Radio name={"radio-test"}>Radio box test</Radio>
|
||
|
|
<Radio name={"radio-test"}>Radio box test</Radio>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<h2>HTML</h2>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<a href={"#"}>Link test</a>
|
||
|
|
</div>
|
||
|
|
<p>
|
||
|
|
<strong>Lorem ipsum</strong> dolor <code>sit amet</code>, <em>consectetur</em> adipiscing elit. Donec accumsan pulvinar felis, vitae eleifend augue lacinia tempus. Integer nec iaculis ante. Duis a quam urna. Nullam tincidunt rutrum felis, a efficitur enim facilisis sit amet. Quisque dictum semper sagittis. Maecenas in orci hendrerit, tempor nunc non, tempus mi. Praesent blandit varius rutrum. Nullam quis mauris eros. Vestibulum commodo libero sed pellentesque pharetra. Donec eget fringilla ante. Aliquam id leo massa. Duis dictum nunc ut dolor iaculis malesuada. Nulla elementum justo a sem eleifend finibus. Phasellus bibendum elit nibh, at tempor odio efficitur id.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Steps</h2>
|
||
|
|
|
||
|
|
<div className={"steps"}>
|
||
|
|
<h3 className={"step"}>Step one</h3>
|
||
|
|
<h3 className={"step"}>Step two</h3>
|
||
|
|
<h3 className={"step"}>Step three</h3>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|