@makeen.io/material-ui-kit/distr/atoms/InputPreviews/StatisticPreview.js

Makeen UI components kit. Based on material-ui.

import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject3() {var data = _taggedTemplateLiteral(["\n  color: ", ";\n\n  .", "-info-title {\n    font-size: 22px;\n    font-weight: bold;\n\n    &.large {\n      font-size: 26px;\n    }\n  }\n\n  .", "-info-description {\n    display: flex;\n    align-items: flex-start;\n\n    &.large {\n      font-size: 26px;\n\n      .text {\n        width: 100px;\n      }\n    }\n\n    .text {\n      font-size: 13px;\n      color: ", ";\n      font-weight: 500;\n      position: relative;\n\n      .info {\n        top: 5px;\n        right: -20px;\n        position: absolute;\n      }\n\n      .info svg {\n        font-size: 16px;\n        color: ", ";\n      }\n    }\n  }\n"]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = _taggedTemplateLiteral(["\n  margin-right: 10px;\n\n  &.large {\n    font-size: 32px;\n\n    path[fill],\n    path[d],\n    svg {\n      width: 50px;\n      height: 50px;\n    }\n  }\n\n  &.medium {\n    font-size: 25px;\n\n    path[fill],\n    path[d],\n    svg {\n      width: 32px;\n      height: 32px;\n    }\n  }\n"]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";
import _ from "lodash";
import { FaInfoCircle } from "react-icons/fa";
import styled from "styled-components";
var clsPrefix = "explorer-statistic";
var StatisticWrapper = styled.div(_templateObject());



var StatisticIconWrapper = styled.div(_templateObject2());
























var StatisticInfoWrapper = styled.div(_templateObject3(),
function (props) {return props.theme.palette.text.primary;},

clsPrefix,








clsPrefix,













function (props) {return props.theme.palette.text.secondary;},











function (props) {return props.theme.palette.text.secondary;});




export default (function (_ref) {var _ref$size = _ref.size,size = _ref$size === void 0 ? "medium" : _ref$size,props = _objectWithoutProperties(_ref, ["size"]);return /*#__PURE__*/React.createElement(StatisticWrapper, { className: clsPrefix }, /*#__PURE__*/
  React.createElement(StatisticIconWrapper, { className: "".concat(clsPrefix, "-icon ").concat(size) }, props.IconComponent), /*#__PURE__*/
  React.createElement(StatisticInfoWrapper, { className: "".concat(clsPrefix, "-info") }, /*#__PURE__*/
  React.createElement("div", { className: "".concat(clsPrefix, "-info-title ").concat(size) }, _.isNumber(props.title) ? props.title.toLocaleString() : props.title), /*#__PURE__*/
  React.createElement("div", { className: "".concat(clsPrefix, "-info-description ").concat(size) }, /*#__PURE__*/
  React.createElement("div", { className: "text" },
  props.desc, /*#__PURE__*/
  React.createElement(FaInfoCircle, { className: "info" })))));});
//# sourceMappingURL=StatisticPreview.js.map