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

Wulper Studio Library Components CMS

import React from 'react';
import { v4 } from 'uuid';
import { Avatar, Box, Stack, useMediaQuery, useTheme } from '@mui/material';
import { CustomCmpText, TextForLinesOutput } from '../../../components';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var UserReview = function UserReview(_ref) {
  var title = _ref.title,
    avatar = _ref.avatar,
    icons = _ref.icons,
    rowOrder = _ref.rowOrder;
  var theme = useTheme();
  var isMqMd = useMediaQuery(theme.breakpoints.down('md'));
  return /*#__PURE__*/_jsxs(Stack, {
    rowGap: isMqMd ? '25px' : '15px',
    children: [/*#__PURE__*/_jsx(Box, {
      sx: {
        order: rowOrder == null ? void 0 : rowOrder.row1
      },
      children: /*#__PURE__*/_jsx(TextForLinesOutput, {
        clines: 1,
        text: title,
        fontWeight: "700",
        variant: "h1"
      })
    }), /*#__PURE__*/_jsx(Box, {
      sx: {
        order: rowOrder == null ? void 0 : rowOrder.row2
      },
      children: /*#__PURE__*/_jsx(CustomCmpText, {
        direction: "row",
        spacing: 2,
        typographyProps: {
          children: avatar.text
        },
        customComponent: /*#__PURE__*/_jsx(Avatar, {
          sx: {
            width: 45,
            height: 45
          },
          src: avatar.url
        })
      })
    }), /*#__PURE__*/_jsx(Box, {
      sx: {
        order: rowOrder == null ? void 0 : rowOrder.row3
      },
      children: /*#__PURE__*/_jsx(Stack, {
        direction: "row",
        rowGap: 2,
        alignItems: "center",
        flexWrap: "wrap",
        columnGap: 2,
        children: icons.map(function (_ref2) {
          var text = _ref2.text,
            icon = _ref2.icon;
          return /*#__PURE__*/_jsx(Box, {
            children: /*#__PURE__*/_jsx(CustomCmpText, {
              direction: "row",
              spacing: 0.5,
              stackProps: {
                alignItems: 'center'
              },
              typographyProps: {
                children: text,
                fontSize: '14px',
                fontWeight: '400'
              },
              customComponent: icon
            })
          }, v4());
        })
      })
    })]
  });
};