UNPKG

1.07 kBJavaScriptView Raw
1import React from 'react';
2import PropTypes from 'prop-types';
3import classNames from 'classnames';
4import { mapToCssModules, tagPropType } from './utils';
5
6const propTypes = {
7 tag: tagPropType,
8 inverse: PropTypes.bool,
9 color: PropTypes.string,
10 body: PropTypes.bool,
11 outline: PropTypes.bool,
12 className: PropTypes.string,
13 cssModule: PropTypes.object,
14 innerRef: PropTypes.oneOfType([
15 PropTypes.object,
16 PropTypes.string,
17 PropTypes.func,
18 ]),
19};
20
21const defaultProps = {
22 tag: 'div'
23};
24
25const Card = (props) => {
26 const {
27 className,
28 cssModule,
29 color,
30 body,
31 inverse,
32 outline,
33 tag: Tag,
34 innerRef,
35 ...attributes
36 } = props;
37 const classes = mapToCssModules(classNames(
38 className,
39 'card',
40 inverse ? 'text-white' : false,
41 body ? 'card-body' : false,
42 color ? `${outline ? 'border' : 'bg'}-${color}` : false
43 ), cssModule);
44
45 return (
46 <Tag {...attributes} className={classes} ref={innerRef} />
47 );
48};
49
50Card.propTypes = propTypes;
51Card.defaultProps = defaultProps;
52
53export default Card;