<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

import AppBar from '@dether.io/dether-ui/AppBar';

import { AppBar } from '@dether.io/dether-ui';

// Default
<AppBar />;
 
// Background color
<AppBar background={color}/>;
 
// With box shadow
<AppBar raised />;
 
// With bottom border
<AppBar separator />;

import Avatar from '@dether.io/dether-ui/Avatar';

import { Avatar } from '@dether.io/dether-ui';

// Default
<Avatar />;
 
// With source file
<Avatar src={'https://goo.gl/TLBLDM'}/>;
 
// Small avatar
<Avatar src={'https://goo.gl/TLBLDM' size="small"}/>;
 
// Large avatar
<Avatar src={'https://goo.gl/TLBLDM' size="large"}/>;

import Button from '@dether.io/dether-ui/Button';

import { Button } from '@dether.io/dether-ui';

// Default
<Button />;
 
// Appearance
<Button appearance="countained"/>;
<Button appearance="outlined"/>;
<Button appearance="textOnly"/>;
 
// Style
<Button color="primary"/>;
<Button color="secondary"/>;
 
// Rounded
<Button rounded/>;
 
// Responsive
<Button responsive/>;
 
// dropShadow
<Button dropShadow/>;

import Checkbox from '@dether.io/dether-ui/Checkbox';

import { Checkbox } from '@dether.io/dether-ui';

// Default
<Checkbox />;
 
// color
<Checkbox color="primary"/>;
<Checkbox color="secondary"/>;
 
// onChange event
<Checkbox onChange={() => {}}/>;
 
// onClick event
<Checkbox onClick={() => {}}/>;

import Colors from '@dether.io/dether-ui/Colors';

import { Colors } from '@dether.io/dether-ui';

// Primary
Colors.primary.light
Colors.primary.medium
Colors.primary.dark
 
// Secondary
Colors.secondary.light
Colors.secondary.medium
Colors.secondary.dark
 
// Black
Colors.black.light
Colors.black.medium
Colors.black.dark
Colors.black.darker
 
// White
Colors.white
 
// Yellow
Colors.yellow
 
// Red
Colors.red

import { H1, H2, H3, H4, H5, H6 } from '@dether.io/dether-ui/Headings'
 
const Title = (
  <div>
    <H1>Title h1</H1>
    <H2>Title h2</H2>
    <H3>Title h3</H3>
    <H4>Title h4</H4>
    <H5>Title h5</H5>
    <H6>Title h6</H6>
  </div>
)
 
const TitleUnderline = <H1 underline>Title h1</H1>
const TitleAlignCenter = <H1>Title h1</H1>
const TitleAlignRight = <H1 right>Title h1</H1>
const TitleAlignLeft = <H1 left>Title h1</H1>
const TitleAlignJustify = <H1 justify>Title h1</H1>

import { Headings } from '@dether.io/dether-ui'
 
const Title = (
  <div>
    <Headings.H1>Title h1</Headings.H1>
    <Headings.H2>Title h2</Headings.H2>
    <Headings.H3>Title h3</Headings.H3>
    <Headings.H4>Title h4</Headings.H4>
    <Headings.H5>Title h5</Headings.H5>
    <Headings.H6>Title h6</Headings.H6>
  </div>
)
 
const TitleUnderline = <Headings.H1 underline>Title h1</Headings.H1>
const TitleAlignCenter = <Headings.H1>Title h1</Headings.H1>
const TitleAlignRight = <Headings.H1 right>Title h1</Headings.H1>
const TitleAlignLeft = <Headings.H1 left>Title h1</Headings.H1>
const TitleAlignJustify = <Headings.H1 justify>Title h1</Headings.H1>

import Icon from '@dether.io/dether-ui/Icon';

import { Icon } from '@dether.io/dether-ui';

// Default
<Icon />;
 
// Color
<Icon color={color}/>;
 
// Size
<Icon size="sm"/>;
<Icon size="md"/>;
<Icon size="lg"/>;
 
// Icons
<Icon name="accessTime"/>;
const iconNames = [
  'accessTime',
  'add',
  'addShoppingCart',
  'airplaneModeActive',
  'arrowDropDown',
  'arrowDropUp',
  'arrowLeft',
  'arrowRight',
  'checkbox',
  'checkCircle',
  'circle',
  'close',
  'event',
  'favorite',
  'fingerprint',
  'flightLand',
  'flightTakeoff',
  'fullscreen',
  'fullscreenExit',
  'keyboardArrowDown',
  'keyboardArrowUp',
  'keyboardArrowLeft',
  'keyboardArrowRight',
  'localisation',
  'locationOn',
  'menu',
  'map',
  'permIdentity',
  'poll',
  'profile',
  'qrCode',
  'radio',
  'save',
  'search',
  'sell',
  'share',
  'shop',
  'shoppingCart',
  'thumbsUp',
  'token',
  'translate',
  'tune',
  'user',
  'visibility',
  'wallet',
  'whatshot',
]

import Input from '@dether.io/dether-ui/Input';

import { Input } from '@dether.io/dether-ui';

// Default
<Input />;
 
// onChange event
<Input onChange={() => {}} />;
 
// onClick event
<Input onClick={() => {}} />;
 
// Clear Input function
<Input handleClearInput={() => {}} />;
 
// isValid
<Input isValid />;
<Input isValid={true} />;
<Input isValid={false} />;
 
// Value
<Input value={value} />;
 
// Error Message
<Input errorMessage={errorMessage} />;
 
// Hint
<Input hint={hint} />;
 
// Disabled
<Input disabled />;
 
// Sizes ( with labels )
<Input size="sm" />;
<Input size="md" />;
<Input size="lg" />;
 
// Sizes ( in pixels )
<Input size={250} />;

import List from '@dether.io/dether-ui/List';

import { List } from '@dether.io/dether-ui';

// Default
<List>
    <List.Item key={item.key}>
      <List.Content>
        <List.Header>{item.header}</List.Header>
      </List.Content>
    </List.Item>
</List>
 
// Right aligned action
<List>
    <List.Item key={item.key}>
      <List.Content>
        <List.Header>{item.header}</List.Header>
        <List.Description>{item.description}</List.Description>
      </List.Content>
      <List.Content right>
        <List.Action>
          <Icon name="search" />
        </List.Action>
      </List.Content>
    </List.Item>
  </List>
 
// Left aligned action
<List type="content">
  <List.Item key={item.key}>
    <List.Content left>
      <List.Action>
        <Icon name="favorite" />
      </List.Action>
    </List.Content>
    <List.Content>
      <List.Header>{item.header}</List.Header>
    </List.Content>
    <List.Content right>
      <Icon name="search" />
    </List.Content>
  </List.Item>
</List>

import { CircularLoader, LinearLoader, PointLoader } from '@dether.io/dether-ui/Loader'
 
// Circular Loader
<CircularLoader />
 
// Linear Loader
<LinearLoader />
 
// Point Loader
<PointLoader />

import { Loader } from '@dether.io/dether-ui'
 
// Circular Loader
<Loader.CircularLoader />
 
// Linear Loader
<Loader.LinearLoader />
 
// Point Loader
<Loader.PointLoader />

// Circular Loader color
<CircularLoader color="primary"/>
<CircularLoader color="secondary"/>
<CircularLoader color="black"/>
 
// Circular Loader contained
<CircularLoader contained/>
 
// Circular Loader paused
<CircularLoader paused/>
 
// Linear Loader color
<LinearLoader color="primary"/>
<LinearLoader color="secondary"/>
<LinearLoader color="black"/>
 
// Linear Loader progress (0 to 100)
<LinearLoader color={10}/>
 
// Point Loader color
<PointLoader color="primary"/>
<PointLoader color="secondary"/>
<PointLoader color="black"/>
 
// Point Loader paused
<PointLoader paused/>

import Logo from '@dether.io/dether-ui/Logo';

import { Logo } from '@dether.io/dether-ui';

<Logo />;
 
// Display only Dether's logo
<Logo display="logo" />;
 
// Display only Dether's brand name
<Logo display="name" />;
 
// Display both logo and name
<Logo display="all" />;
 
// Sizes
<Logo size="sm" />;
<Logo size="md" />;
<Logo size="lg" />;

import { Margin, Padding } from '@dether.io/dether-ui/Margin';
 
Margin.body;
Margin.button;
Margin.iconToText;
Margin.iconToIcon;
 
Padding.button;
Padding.buttonWithIcon;
Padding.modalBody;
Padding.modalFooter;

import { Margin } from '@dether.io/dether-ui';
 
Margin.Margin.body;
Margin.Margin.button;
Margin.Margin.iconToText;
Margin.Margin.iconToIcon;
 
Margin.Padding.button;
Margin.Padding.buttonWithIcon;
Margin.Padding.modalBody;
Margin.Padding.modalFooter;

import Navigation from '@dether.io/dether-ui/Navigation';

import { Navigation } from '@dether.io/dether-ui';

// Default
<Navigation />;
 
// With separator
<Navigation separator/>;
 
// Active element key
<Navigation defaultActiveItem={itemKey}>

import Radio from '@dether.io/dether-ui/Radio';

import { Radio } from '@dether.io/dether-ui';

// Default
<Radio />;
 
// onChange event
<Radio onChange={() => {}} />
 
// onClick event
<Radio onClick={() => {}} />
 
// Color
<Radio color="primary" />
<Radio color="secondary" />
<Radio color="black" />

import Range from '@dether.io/dether-ui/Range';

import { Range } from '@dether.io/dether-ui';

// Default
<Range />;
 
// Color
<Range color="primary">
<Range color="secondary">
<Range color="black">

import Text from '@dether.io/dether-ui/Text'
 
<Text variant="body1">
  Apparently we had reached a great height in the atmosphere...
</Text>
 
<Text variant="body2">
  Apparently we had reached a great height in the atmosphere...
</Text>
 
<Text variant="caption">
  Apparently we had reached a great height in the atmosphere...
</Text>
 
<Text variant="button">
  Apparently we had reached a great height in the atmosphere...
</Text>
 
<Text underline>
  Apparently we had reached a great height in the atmosphere...
</Text>

import { FontSize, LetterSpacing, FontFamily, FontWeight } from '@dether.io/dether-ui/Typography';
 
// Font Sizes
FontSize.h1;
FontSize.h2;
FontSize.h3;
FontSize.h4;
FontSize.h5;
FontSize.h6;
FontSize.body1;
FontSize.body2;
FontSize.button;
FontSize.caption;
 
// Letter Spacing
LetterSpacing.h1;
LetterSpacing.h2;
LetterSpacing.h3;
LetterSpacing.h4;
LetterSpacing.h5;
LetterSpacing.h6;
LetterSpacing.body1;
LetterSpacing.body2;
LetterSpacing.button;
LetterSpacing.caption;
 
// Font Family
FontFamily;
 
// Font Weight
FontWeight.regular;
FontWeight.medium;
FontWeight.bold;