@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
87 lines (86 loc) • 3.37 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CardAssetTitleIcon = void 0;
var _react = _interopRequireDefault(require("react"));
var _uuid = require("uuid");
var _react2 = require("@iconify/react");
var _material = require("@mui/material");
var _CardFlexible = require("../../CardFlexible");
var _index = require("../../../components/IconButtonComponent/index");
var _index2 = require("../../../components/TextForLinesOutput/index");
var _jsxRuntime = require("react/jsx-runtime");
var CardAssetTitleIcon = exports.CardAssetTitleIcon = function CardAssetTitleIcon(_ref) {
var cards = _ref.cards;
var theme = (0, _material.useTheme)();
var isMqMd = (0, _material.useMediaQuery)(theme.breakpoints.down('md'));
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
rowGap: "15px",
children: cards.map(function (_ref2) {
var description = _ref2.description,
icon = _ref2.icon,
imgUrl = _ref2.imgUrl,
title = _ref2.title;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CardFlexible.CardFlexible, {
disabledHover: true,
shadow: "none",
border: "1px solid ".concat(theme.palette.background.paper, "}"),
sx: {
borderRadius: '20px',
display: 'flex',
padding: isMqMd ? '10px' : '20px',
width: '100%',
direction: isMqMd ? 'flex-start' : 'space-between',
flexDirection: 'row',
justifyContent: 'space-between'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
sx: {
flexWrap: 'nowrap',
columnGap: 2,
rowGap: 2,
display: 'flex',
flexDirection: 'row'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
sx: {
width: isMqMd ? 70 : 120,
minWidth: isMqMd ? 70 : 120,
height: '100%',
background: "url(".concat(imgUrl, ") center no-repeat"),
borderRadius: '10px',
backgroundSize: 'cover'
}
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
rowGap: isMqMd ? 0.5 : 1.5,
sx: {
maxWidth: isMqMd ? '100%' : '75ch'
},
flexGrow: 0,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
variant: "h4",
children: title
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.TextForLinesOutput, {
text: description,
clines: isMqMd ? 2 : 3,
color: theme.palette.text.secondary
})
})]
})]
}), !isMqMd && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
justifyContent: "center",
alignItems: isMqMd ? 'flex-start' : undefined,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.IconButtonComponent, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
icon: icon,
color: theme.palette.primary.main
})
})
})]
}, (0, _uuid.v4)());
})
});
};