All files / components/profile-card profile-card.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
 
 
 
 
1x
 
 
1x
1x
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
import React from 'react';
import PropTypes from 'prop-types';
 
class ProfileCard extends React.Component {
  render() {
    const coverPic = this.props.coverImg ? {
      background: `url(${this.props.coverImg}) center`
    } : {};
    const alignmentType = this.props.imgAlignment === 'left' ? 'widget-user-2' : 'widget-user';
    const footerPadding = this.props.imgAlignment === 'left' ? 'no-padding' : '';
 
    return (
      <div className={`col-md-${this.props.width}`}>
        <div className={`box box-widget ${alignmentType}`}>
          <div className={`widget-user-header ${this.props.theme}`} style={coverPic}>
            {this.props.img ? (
              <div className="widget-user-image">
                <img className="img-circle" src={this.props.img} alt="User Avatar" />
              </div>
            ) : ''}
            <h3 className="widget-user-username">{this.props.name}</h3>
            <h5 className="widget-user-desc">{this.props.description}</h5>
          </div>
          <div className={`box-footer ${footerPadding}`}>
            {this.props.children}
          </div>
        </div>
      </div>
    );
  }
}
 
ProfileCard.propTypes = {
  width: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number
  ]),
  theme: PropTypes.string,
  imgAlignment: PropTypes.string,
  name: PropTypes.string,
  description: PropTypes.string,
  img: PropTypes.string,
  coverImg: PropTypes.string,
  date: PropTypes.string
};
 
ProfileCard.defaultProps = {
  width: 3,
  theme: 'bg-yellow',
  imgAlignment: 'center',
  name: '',
  description: ''
};
 
export default ProfileCard;