resources/js/components/users/Records.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Col, Row } from 'react-bootstrap';
   4
   5 import Icon from '../common/Icon';
   6
   7 const Records = ({
   8         first,
   9         second,
  10         third,
  11 }) => <Row>
  12         <Col>
  13                 <div className="record-box">
  14                         <span className="icon">
  15                                 <Icon.FIRST_PLACE className="text-gold" />
  16                         </span>
  17                         <span className="count">
  18                                 {first}
  19                         </span>
  20                 </div>
  21         </Col>
  22         <Col>
  23                 <div className="record-box">
  24                         <span className="icon">
  25                                 <Icon.SECOND_PLACE className="text-silver" />
  26                         </span>
  27                         <span className="count">
  28                                 {second}
  29                         </span>
  30                 </div>
  31         </Col>
  32         <Col>
  33                 <div className="record-box">
  34                         <span className="icon">
  35                                 <Icon.THIRD_PLACE className="text-bronze" />
  36                         </span>
  37                         <span className="count">
  38                                 {third}
  39                         </span>
  40                 </div>
  41         </Col>
  42 </Row>;
  43
  44 Records.propTypes = {
  45         first: PropTypes.number,
  46         second: PropTypes.number,
  47         third: PropTypes.number,
  48 };
  49
  50 export default Records;