import * as React from 'react';
import { Background, Button, Caption, Content, Icon, Label, Reference, Screen, Title, TitleSub } from '../primitives';

export const App = () => (
    <Background>
        <Screen>
            <Content>
                <div>
                    <Title>Title</Title>
                </div>
                <div>
                    <TitleSub>Subtitle</TitleSub>
                </div>
                <div>
                    <Caption>Caption</Caption>
                </div>
                <div>
                    <Reference>Reference</Reference>
                </div>
                <div>
                    <Label>Label</Label>
                </div>
                <div>
                    <Icon>person</Icon>
                </div>
                <div>
                    <Label><Icon iconSize={24}>mouse</Icon> 12 clicks</Label>
                </div>
                <div>
                    <Button>Normal Button</Button>
                    <Button primary><Icon align>check</Icon> Primary Button</Button>
                    <Button secondary><Icon align>clear</Icon> Secondary Button</Button>
                </div>
            </Content>
        </Screen>
    </Background>
);