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

Wulper Studio Library Components CMS

import React from 'react';
import { Stack, Typography, useMediaQuery, useTheme } from '@mui/material';
import { TextForLinesOutput } from '../../../components';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var TitlePrice = function TitlePrice(_ref) {
  var title = _ref.title,
    description = _ref.description,
    price = _ref.price,
    descriptionPrice = _ref.descriptionPrice;
  var theme = useTheme();
  var isMqMd = useMediaQuery(theme.breakpoints.down('md'));
  return /*#__PURE__*/_jsxs(Stack, {
    sx: {
      alignItems: 'flex-start',
      display: 'flex',
      flexDirection: isMqMd ? 'column' : 'row',
      justifyContent: 'space-between',
      rowGap: isMqMd ? '25px' : '15px'
    },
    children: [/*#__PURE__*/_jsxs(Stack, {
      sx: {
        rowGap: '5px'
      },
      children: [/*#__PURE__*/_jsx(TextForLinesOutput, {
        clines: 1,
        text: title,
        fontWeight: "700",
        variant: "h2"
      }), /*#__PURE__*/_jsx(Typography, {
        fontSize: isMqMd ? '1rem' : '18px',
        fontWeight: "400",
        color: theme.palette.text.secondary,
        children: description
      })]
    }), /*#__PURE__*/_jsxs(Stack, {
      children: [/*#__PURE__*/_jsx(TextForLinesOutput, {
        clines: 1,
        text: price,
        fontWeight: "700",
        variant: "h2"
      }), /*#__PURE__*/_jsx(Typography, {
        fontSize: isMqMd ? '1rem' : '18px',
        fontWeight: "400",
        color: theme.palette.text.secondary,
        children: descriptionPrice
      })]
    })]
  });
};