ih-pagelet-financial-aid/src/components/FinancialAidAwards/AwardSummaryHeader.jsx

PS Financial Aid Pagelet

import React, { Component, PropTypes } from 'react';
import numeral from 'numeral';
import Table from 'material-ui/lib/table/table';
import TableRow from 'material-ui/lib/table/table-row';
import TableBody from 'material-ui/lib/table/table-body';
import TableHeader from 'material-ui/lib/table/table-header';
import TableHeaderColumn from 'material-ui/lib/table/table-header-column';
import TableRowColumn from 'material-ui/lib/table/table-row-column';

const { any } = PropTypes;

export default class AwardSummaryHeader extends Component {
  render() {
    const summary = this.props;
    return (
      <Table selectable={false} multiSelectable={false} fixedHeader>
        <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
          <TableRow>
            <TableHeaderColumn colSpan="2" style={{fontSize: '14px', fontWeight: 500, lineHeight: '48px', paddingLeft: '16px'}}>
              Aid Year Total
            </TableHeaderColumn>
          </TableRow>
        </TableHeader>
        <TableBody displayRowCheckbox={false}>
          <TableRow selectable={false}>
            <TableHeaderColumn>Offered</TableHeaderColumn>
            <TableRowColumn selectable={false}>{numeral(summary.offeredBalance).format('$0,0.00')}</TableRowColumn>
            <TableHeaderColumn>Accepted</TableHeaderColumn>
            <TableRowColumn selectable={false}>{numeral(summary.acceptedBalance).format('$0,0.00')}</TableRowColumn>
          </TableRow>
        </TableBody>
      </Table>
    );
  }
}

AwardSummaryHeader.propTypes = {
  offeredBalance: any,
  acceptedBalance: any,
  disbursedBalance: any,
};

AwardSummaryHeader.defaultProps = {
  offeredBalance: 0,
  acceptedBalance: 0,
  disbursedBalance: 0,
};