@wulperstudio/cms/node/organisms/CardAlert/CardAlert.js

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CardAlert = void 0;
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@iconify/react");
var _material = require("@mui/material");
var _Button = require("../../components/Button");
var _styled = require("./styled");
var _TextForLinesOutput = require("../../components/TextForLinesOutput");
var _jsxRuntime = require("react/jsx-runtime");
/* eslint-disable react/prop-types */

var CardAlert = exports.CardAlert = function CardAlert(_ref) {
  var description = _ref.description,
    icon = _ref.icon,
    color = _ref.color,
    msg = _ref.msg,
    textButton = _ref.textButton,
    importantText = _ref.importantText;
  var theme = (0, _material.useTheme)();
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.Card, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.ContainerIcon, {
      color: color,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
        icon: icon,
        color: "#fff",
        width: "50px",
        height: "50px"
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.ContainerTitle, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextForLinesOutput.TextForLinesOutput, {
        clines: 1,
        text: msg,
        fontSize: "30px",
        fontWeight: "400"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextForLinesOutput.TextForLinesOutput, {
        clines: 1,
        text: importantText,
        fontSize: "30px",
        fontWeight: "700"
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
      variant: "body2",
      sx: {
        color: theme.palette.text.secondary,
        fontSize: '16px'
      },
      children: description
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
      variant: "contained",
      disableElevation: true,
      fullWidth: true,
      size: "large",
      sx: {
        backgroundColor: color,
        borderRadius: '15px'
      },
      children: textButton
    })]
  });
};