Init

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

app/routes/components/Analytics/SessionsByDevice.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const SessionsByDevice = (props) => (
+    <React.Fragment>
+        <div className={ `mb-2 ${ props.valuePercentColor }` }>
+            { props.title }
+        </div>
+        <h2 className={ `${ props.valuePercentColor }` }>
+            { props.valuePercent }%
+        </h2>
+        <div className={ `mb-3 ${ props.valueColor }` }>
+            { props.value }
+        </div>
+    </React.Fragment>
+)
+SessionsByDevice.propTypes = {
+    title: PropTypes.node,
+    titlePercentColor: PropTypes.node,
+    valuePercent: PropTypes.string,
+    valuePercentColor: PropTypes.node,
+    value: PropTypes.node,
+    valueColor: PropTypes.node
+};
+SessionsByDevice.defaultProps = {
+    title: "Title",
+    titlePercentColor: "text-inverse",
+    valuePercent: "00,0",
+    valuePercentColor: "text-muted",
+    value: "000,000",
+    valueColor: "text-muted"
+};
+
+
+export { SessionsByDevice };