60 lines
1.6 KiB
JavaScript
Executable File
60 lines
1.6 KiB
JavaScript
Executable File
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import {
|
|
CardTitle,
|
|
Badge
|
|
} from './../../../components';
|
|
|
|
const ProfileOverviewCard = (props) => (
|
|
<React.Fragment>
|
|
<div className="d-flex">
|
|
<CardTitle tag="h6">
|
|
{ props.title }
|
|
</CardTitle>
|
|
<Badge pill color={ `${ props.badgeColor }` } className="align-self-start ml-auto">
|
|
{ props.badgeTitle }
|
|
</Badge>
|
|
</div>
|
|
<div className="text-center my-4">
|
|
<h2>{ props.value }</h2>
|
|
<span>
|
|
{ props.valueTitle }
|
|
</span>
|
|
</div>
|
|
<div className="d-flex">
|
|
<span>
|
|
{ props.footerTitle }
|
|
</span>
|
|
<span className={ `ml-auto ${ props.footerTitleClassName }` }>
|
|
<i className={ `fa mr-1 fa-${ props.footerIcon }` }></i>
|
|
{ props.footerValue }
|
|
</span>
|
|
</div>
|
|
</React.Fragment>
|
|
)
|
|
ProfileOverviewCard.propTypes = {
|
|
title: PropTypes.node,
|
|
badgeColor: PropTypes.node,
|
|
badgeTitle: PropTypes.node,
|
|
value: PropTypes.node,
|
|
valueTitle: PropTypes.node,
|
|
footerTitle: PropTypes.node,
|
|
footerTitleClassName: PropTypes.node,
|
|
footerIcon: PropTypes.node,
|
|
footerValue: PropTypes.node
|
|
};
|
|
ProfileOverviewCard.defaultProps = {
|
|
title: "Waiting",
|
|
badgeColor: "secondary",
|
|
badgeTitle: "Waiting",
|
|
value: "0.000",
|
|
valueTitle: "Waiting",
|
|
footerTitle: "Waiting",
|
|
footerTitleClassName: "text-muted",
|
|
footerIcon: "caret-down",
|
|
footerValue: "0.00%"
|
|
};
|
|
|
|
export { ProfileOverviewCard };
|