47 lines
1.2 KiB
JavaScript
Executable File
47 lines
1.2 KiB
JavaScript
Executable File
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import {
|
|
Progress,
|
|
InputGroupAddon,
|
|
InputGroupText,
|
|
Input,
|
|
InputGroup
|
|
} from './../../../components';
|
|
|
|
|
|
const MetricVsTarget = (props) => (
|
|
<React.Fragment>
|
|
<h2 className="pt-4 pb-2">
|
|
{ props.value }
|
|
</h2>
|
|
<Progress value={ `${ props.progressbarValue }` } color={ `${ props.progressbarColor }` } className="mb-2" style={{height: "5px"}} />
|
|
<div className="mb-3">
|
|
Target: { props.targetValue }
|
|
</div>
|
|
<InputGroup className="mb-1">
|
|
<InputGroupAddon addonType="prepend">
|
|
<InputGroupText>Daily Target:</InputGroupText>
|
|
</InputGroupAddon>
|
|
<Input placeholder="Enter..." />
|
|
</InputGroup>
|
|
</React.Fragment>
|
|
)
|
|
MetricVsTarget.propTypes = {
|
|
title: PropTypes.node,
|
|
value: PropTypes.node,
|
|
progressbarValue: PropTypes.string,
|
|
progressbarColor: PropTypes.node,
|
|
targetValue: PropTypes.node
|
|
};
|
|
MetricVsTarget.defaultProps = {
|
|
title: "Title",
|
|
value: "000.000",
|
|
progressbarValue: "24",
|
|
progressbarColor: "secondary",
|
|
targetValue: "000.000"
|
|
};
|
|
|
|
|
|
export { MetricVsTarget };
|