@wulperstudio/cms/node/layouts/HeaderOneColumn/components/CardInvestment/index.js

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CardInvestment = void 0;
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@iconify/react");
var _material = require("@mui/material");
var _consts = require("../../../../helpers/consts");
var _organisms = require("../../../../organisms");
var _icons = require("../../../../helpers/icons");
var _components = require("../../../../components");
var _jsxRuntime = require("react/jsx-runtime");
var _TextForLinesOutput;
var CardInvestment = exports.CardInvestment = function CardInvestment() {
  var theme = (0, _material.useTheme)();
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_organisms.CardFlexible, {
    disabledHover: true,
    shadow: "none",
    padding: "0px",
    border: "1px solid ".concat(theme.palette.background.paper),
    sx: {
      display: 'flex',
      flexDirection: 'column',
      rowGap: '15px',
      height: 'auto'
    },
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
      component: "article",
      sx: {
        background: "url(".concat(_consts.consts.backgroundImageRandom, ") center center no-repeat"),
        backgroundSize: 'cover',
        borderRadius: '15px',
        minHeight: '220px',
        height: '100%',
        width: '100%',
        flexGrow: 1,
        flex: 1,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        position: 'relative'
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
        direction: "row",
        justifyContent: "flex-end",
        columnGap: 2,
        flexWrap: "wrap",
        sx: {
          p: '15px'
        },
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButtonComponent, {
          iconProps: {
            sx: {
              position: 'relative',
              backgroundColor: 'rgba(247, 247, 247, 0.1)',
              '&:hover': {
                backgroundColor: 'rgba(247, 247, 247, 0.4)'
              }
            }
          },
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
            icon: _icons.ICONS_NAME.document,
            color: theme.palette.background["default"],
            style: {
              zIndex: 2
            }
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButtonComponent, {
          iconProps: {
            sx: {
              position: 'relative',
              backgroundColor: 'rgba(247, 247, 247, 0.1)',
              '&:hover': {
                backgroundColor: 'rgba(247, 247, 247, 0.4)'
              }
            }
          },
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
            icon: _icons.ICONS_NAME.edit,
            color: theme.palette.background["default"],
            style: {
              zIndex: 2
            }
          })
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
        direction: "row",
        justifyContent: "flex-end",
        sx: {
          p: '0px 15px',
          marginBottom: '-15px',
          zIndex: 3
        },
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButtonComponent, {
          iconProps: {
            sx: {
              boxShadow: theme.shadows[1]
            }
          },
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
            icon: _icons.ICONS_NAME.bookmark,
            color: theme.palette.primary.main
          })
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
        sx: {
          position: 'absolute',
          bottom: 0,
          left: 0,
          rigth: 0,
          zIndex: 2,
          width: '100%',
          height: '70%',
          background: 'linear-gradient(182.4deg, rgba(255, 255, 255, 0) 38.06%, #FFFFFF 89.88%)'
        }
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
      rowGap: "15px",
      sx: {
        marginTop: '-10px'
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
        component: "header",
        sx: {
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          p: '0px 15px'
        },
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.AvatarTitleDescription, {
          title: "WULPERS LLC",
          description: "USA | FinTech",
          avatarProps: {
            disabledHover: true,
            src: _consts.consts.avatarImg
          }
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
        sx: {
          p: '0px 15px'
        },
        children: _TextForLinesOutput || (_TextForLinesOutput = /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextForLinesOutput, {
          clines: 2,
          text: "First CMS all in 1 for B2B market in LATAM",
          variant: "h3"
        }))
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
        sx: {
          p: '0px 15px 15px 15px'
        },
        direction: "row",
        justifyContent: "flex-start",
        columnGap: 2,
        flexWrap: "wrap",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconText, {
          isOpenTooltip: true,
          nameIcon: _icons.ICONS_NAME.users,
          text: "120",
          colorIcon: theme.palette.text.secondary
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconText, {
          isOpenTooltip: true,
          nameIcon: _icons.ICONS_NAME.person_add,
          text: "4.2",
          colorIcon: theme.palette.text.secondary
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconText, {
          nameIcon: _icons.ICONS_NAME.starCardHelper,
          text: "5.0",
          colorIcon: theme.palette.text.secondary
        })]
      })]
    })]
  });
};