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

Wulper Studio Library Components CMS

/* eslint-disable react/prop-types */
import React from 'react';
import { Icon } from '@iconify/react';
import { Typography, useTheme } from '@mui/material';
import { Button } from '../../components/Button';
import { Card, ContainerIcon, ContainerTitle } from './styled';
import { TextForLinesOutput } from '../../components/TextForLinesOutput';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var 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 = useTheme();
  return /*#__PURE__*/_jsxs(Card, {
    children: [/*#__PURE__*/_jsx(ContainerIcon, {
      color: color,
      children: /*#__PURE__*/_jsx(Icon, {
        icon: icon,
        color: "#fff",
        width: "50px",
        height: "50px"
      })
    }), /*#__PURE__*/_jsxs(ContainerTitle, {
      children: [/*#__PURE__*/_jsx(TextForLinesOutput, {
        clines: 1,
        text: msg,
        fontSize: "30px",
        fontWeight: "400"
      }), /*#__PURE__*/_jsx(TextForLinesOutput, {
        clines: 1,
        text: importantText,
        fontSize: "30px",
        fontWeight: "700"
      })]
    }), /*#__PURE__*/_jsx(Typography, {
      variant: "body2",
      sx: {
        color: theme.palette.text.secondary,
        fontSize: '16px'
      },
      children: description
    }), /*#__PURE__*/_jsx(Button, {
      variant: "contained",
      disableElevation: true,
      fullWidth: true,
      size: "large",
      sx: {
        backgroundColor: color,
        borderRadius: '15px'
      },
      children: textButton
    })]
  });
};