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

Wulper Studio Library Components CMS

import React from 'react';
import { v4 } from 'uuid';
import { Stack, Typography, useMediaQuery, useTheme } from '@mui/material';
import { GridCards } from '../../GridCards';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var TitleGrid = function TitleGrid(_ref) {
  var list = _ref.list;
  var theme = useTheme();
  var isMqMd = useMediaQuery(theme.breakpoints.down('md'));
  return /*#__PURE__*/_jsx(GridCards, {
    children: list.map(function (_ref2) {
      var label = _ref2.label,
        description = _ref2.description;
      return /*#__PURE__*/_jsxs(Stack, {
        component: "article",
        children: [/*#__PURE__*/_jsx(Typography, {
          fontWeight: "400",
          textTransform: "capitalize",
          children: label
        }), /*#__PURE__*/_jsx(Typography, {
          fontSize: isMqMd ? '16px' : '20px',
          fontWeight: "700",
          children: description
        })]
      }, v4());
    })
  });
};