@wulperstudio/cms/organisms/Blocks/CardAssetTitleIcon/index.js

Wulper Studio Library Components CMS

import React from 'react';
import { v4 } from 'uuid';
import { Icon } from '@iconify/react';
import { Box, Stack, useMediaQuery, useTheme, Typography } from '@mui/material';
import { CardFlexible } from '../../CardFlexible';
import { IconButtonComponent } from '../../../components/IconButtonComponent/index';
import { TextForLinesOutput } from '../../../components/TextForLinesOutput/index';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var CardAssetTitleIcon = function CardAssetTitleIcon(_ref) {
  var cards = _ref.cards;
  var theme = useTheme();
  var isMqMd = useMediaQuery(theme.breakpoints.down('md'));
  return /*#__PURE__*/_jsx(Stack, {
    rowGap: "15px",
    children: cards.map(function (_ref2) {
      var description = _ref2.description,
        icon = _ref2.icon,
        imgUrl = _ref2.imgUrl,
        title = _ref2.title;
      return /*#__PURE__*/_jsxs(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__*/_jsxs(Stack, {
          sx: {
            flexWrap: 'nowrap',
            columnGap: 2,
            rowGap: 2,
            display: 'flex',
            flexDirection: 'row'
          },
          children: [/*#__PURE__*/_jsx(Box, {
            sx: {
              width: isMqMd ? 70 : 120,
              minWidth: isMqMd ? 70 : 120,
              height: '100%',
              background: "url(".concat(imgUrl, ") center no-repeat"),
              borderRadius: '10px',
              backgroundSize: 'cover'
            }
          }), /*#__PURE__*/_jsxs(Stack, {
            rowGap: isMqMd ? 0.5 : 1.5,
            sx: {
              maxWidth: isMqMd ? '100%' : '75ch'
            },
            flexGrow: 0,
            children: [/*#__PURE__*/_jsx(Typography, {
              variant: "h4",
              children: title
            }), /*#__PURE__*/_jsx(Box, {
              children: /*#__PURE__*/_jsx(TextForLinesOutput, {
                text: description,
                clines: isMqMd ? 2 : 3,
                color: theme.palette.text.secondary
              })
            })]
          })]
        }), !isMqMd && /*#__PURE__*/_jsx(Stack, {
          justifyContent: "center",
          alignItems: isMqMd ? 'flex-start' : undefined,
          children: /*#__PURE__*/_jsx(IconButtonComponent, {
            children: /*#__PURE__*/_jsx(Icon, {
              icon: icon,
              color: theme.palette.primary.main
            })
          })
        })]
      }, v4());
    })
  });
};