@makeen.io/material-ui-kit/distr/atoms/InfoCard/index.js

Makeen UI components kit. Based on material-ui.

import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject() {var data = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 4px;\n  padding: 12px 24px;\n  position: relative;\n  padding-", ": 40px;\n\n  .header {\n    .icon {\n      position: absolute;\n      top: 10px;\n      ", ": 10px;\n      color: ", ";\n    }\n\n    .title {\n      margin-bottom: 12px;\n      color: ", ";\n    }\n  }\n\n  .content {\n    .description {\n      color: ", ";\n    }\n\n    .children {\n      margin-top: 12px;\n    }\n  }\n\n  .hidden {\n    display: none;\n  }\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";

import { FaInfoCircle } from "react-icons/fa";
import styled from "styled-components";
import Text from "../Text";
var InfoCardWrapper = styled.div(_templateObject(),
function (props) {return props.theme.palette.InfoCard.backgroundColor;},
function (props) {return props.theme.palette.InfoCard.borderColor;},



function (props) {return props.layout === "icon-left" ? "left" : "right";},





function (props) {return props.layout === "icon-left" ? "left" : "right";},
function (props) {return props.theme.palette.InfoCard.iconColor;},




function (props) {return props.theme.palette.InfoCard.textColor;},





function (props) {return props.theme.palette.InfoCard.textColor;});











export default (function (_ref) {var title = _ref.title,description = _ref.description,layout = _ref.layout,children = _ref.children;return /*#__PURE__*/React.createElement(InfoCardWrapper, { layout: layout }, /*#__PURE__*/
  React.createElement("header", { className: "header" }, /*#__PURE__*/
  React.createElement("div", { className: "title" + (!(title !== null && title !== void 0 && title.length) ? " hidden" : "") }, /*#__PURE__*/
  React.createElement(Text, { noWrap: true, variant: "subtitle1" }, title)), /*#__PURE__*/
  React.createElement("div", { className: "icon" }, /*#__PURE__*/
  React.createElement(FaInfoCircle, { size: 20 }))), /*#__PURE__*/
  React.createElement("div", { className: "content" }, /*#__PURE__*/
  React.createElement("div", { className: "description" }, /*#__PURE__*/
  React.createElement(Text, null, description)), /*#__PURE__*/
  React.createElement("div", { className: "children" + (
    typeof children === "undefined" ? " hidden" : "")
  }, children)));});
//# sourceMappingURL=index.js.map