bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx
2016-05-20 11:13:06 -03:00

158 lines
4.0 KiB
JavaScript

import React, { Component, PropTypes } from 'react';
import styles from './styles.scss';
import { FormattedMessage, FormattedDate } from 'react-intl';
import Button from '../button/component';
export default class Whiteboard extends Component {
handleClick() {
console.log('dummy handler');
}
render() {
return (
<div className={styles.whiteboard}>
<p>
<FormattedMessage
id="app.home.greeting"
description="Message to greet the user."
defaultMessage="Welcome {name}! Your presentation will begin shortly..."
values={{ name: 'James Bond' }}
/>
<br/>
Today is {' '}<FormattedDate value={Date.now()} />
<br/>
Here is some button examples
<br/>
</p>
<p>
<Button
label={'Small'}
onClick={this.handleClick}
size={'sm'}
/>&nbsp;
<Button
label={'Medium'}
onClick={this.handleClick}
/>&nbsp;
<Button
label={'Large'}
onClick={this.handleClick}
size={'lg'}
/>
</p>
<p>
<Button
label={'Default'}
onClick={this.handleClick}
/>&nbsp;
<Button
label={'Primary'}
onClick={this.handleClick}
color={'primary'}
/>&nbsp;
<Button
label={'Danger'}
onClick={this.handleClick}
color={'danger'}
/>&nbsp;
<Button
label={'Success'}
onClick={this.handleClick}
color={'success'}
/>
</p>
<p>
<Button
label={'Default'}
onClick={this.handleClick}
ghost={true}
/>&nbsp;
<Button
label={'Primary'}
onClick={this.handleClick}
color={'primary'}
ghost={true}
/>&nbsp;
<Button
label={'Danger'}
onClick={this.handleClick}
color={'danger'}
ghost={true}
/>&nbsp;
<Button
label={'Success'}
onClick={this.handleClick}
color={'success'}
ghost={true}
/>
</p>
<p>
<Button
label={'With Icon'}
onClick={this.handleClick}
icon={'circle-add'}
/>&nbsp;
<Button
label={'Ghost With Icon'}
onClick={this.handleClick}
color={'primary'}
icon={'circle-add'}
ghost={true}
/>&nbsp;
<Button
label={'Icon Right'}
onClick={this.handleClick}
color={'danger'}
icon={'circle-add'}
ghost={true}
iconRight={true}
/>&nbsp;
<Button
label={'Icon Right'}
onClick={this.handleClick}
color={'success'}
icon={'circle-add'}
iconRight={true}
/>
</p>
<p>
<Button
label={'Small'}
onClick={this.handleClick}
icon={'audio'}
size={'sm'}
circle={true}
/>&nbsp;
<Button
label={'Medium'}
onClick={this.handleClick}
color={'primary'}
icon={'audio'}
ghost={true}
circle={true}
/>&nbsp;
<Button
label={'Large'}
onClick={this.handleClick}
color={'danger'}
icon={'audio'}
size={'lg'}
ghost={true}
circle={true}
/>&nbsp;
<Button
label={'Icon Right'}
onClick={this.handleClick}
color={'success'}
icon={'audio'}
size={'sm'}
iconRight={true}
circle={true}
/>
</p>
</div>
);
}
}