bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx

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>
    );
  }
}