index.js
25 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 = 4, title = null, children = null}) => { |
| 7 | return ( |
| 8 | <div className={styles.card} style={{gridColumn: 'span ' + width}}> |
| 9 | {title && <div className={styles.title}>{title}</div>} |
| 10 | <div className={styles.content}>{children}</div> |
| 11 | </div> |
| 12 | ); |
| 13 | }; |
| 14 | |
| 15 | Card.propTypes = { |
| 16 | // Number of grid columns for Card to span, out of 12 |
| 17 | width: PropTypes.number, |
| 18 | // Title of card |
| 19 | title: PropTypes.string, |
| 20 | // Elements to displayed in content area of card (eg: Chart, List) |
| 21 | children: PropTypes.node.isRequired, |
| 22 | }; |
| 23 | |
| 24 | export default Card; |
| 25 |