Init

Preview: http://dashboards.webkom.co/react/airframe

app/routes/components/Profile/ProfileOverviewCard.js

@@ -0,0 +1,59 @@
+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 };