index.js
35 lines
| 1 | // Import vendor dependencies |
| 2 | import PropTypes from 'prop-types'; |
| 3 | // Import styles |
| 4 | import styles from './style.module.scss'; |
| 5 | |
| 6 | const Card = ( { width, title, children } ) => { |
| 7 | return ( |
| 8 | <div className={ styles.card } style={ { gridColumn: 'span ' + width } }> |
| 9 | { title && ( <div className={ styles.title }> |
| 10 | { title } |
| 11 | </div> ) } |
| 12 | <div className={ styles.content }> |
| 13 | { children } |
| 14 | </div> |
| 15 | </div> |
| 16 | ); |
| 17 | }; |
| 18 | |
| 19 | Card.propTypes = { |
| 20 | // Number of grid columns for Card to span, out of 12 |
| 21 | width: PropTypes.number, |
| 22 | // Title of card |
| 23 | title: PropTypes.string, |
| 24 | // Elements to displayed in content area of card (eg: Chart, List) |
| 25 | children: PropTypes.node.isRequired, |
| 26 | }; |
| 27 | |
| 28 | Card.defaultProps = { |
| 29 | width: 4, |
| 30 | title: null, |
| 31 | children: null, |
| 32 | }; |
| 33 | |
| 34 | export default Card; |
| 35 |