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

Wulper Studio Library Components CMS

import React from 'react';
import { Icon } from '@iconify/react';
import { ButtonGroup, Stack, Typography, useMediaQuery, useTheme } from '@mui/material';
import { ICONS_NAME } from '../../../helpers/icons';
import { Button, CustomCmpText, TextForLinesOutput } from '../../../components';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var TitleButtonGroup = function TitleButtonGroup(_ref) {
  var title = _ref.title,
    description = _ref.description,
    handleNext = _ref.handleNext,
    handlePrev = _ref.handlePrev,
    counter = _ref.counter,
    maxCount = _ref.maxCount;
  var theme = useTheme();
  var isMqMd = useMediaQuery(theme.breakpoints.down('md'));
  return /*#__PURE__*/_jsxs(Stack, {
    sx: {
      rowGap: isMqMd ? '25px' : '15px',
      flexDirection: isMqMd ? 'column-reverse' : 'row',
      alignItems: 'flex-start',
      justifyContent: 'space-between'
    },
    children: [/*#__PURE__*/_jsxs(Stack, {
      sx: {
        rowGap: '15px'
      },
      children: [/*#__PURE__*/_jsx(TextForLinesOutput, {
        clines: 1,
        text: title,
        fontWeight: "700",
        variant: "h1"
      }), /*#__PURE__*/_jsx(Typography, {
        fontSize: isMqMd ? '1rem' : '18px',
        fontWeight: "400",
        children: description
      })]
    }), /*#__PURE__*/_jsx(CustomCmpText, {
      direction: "row-reverse",
      spacing: 2,
      typographyProps: {
        children: "CHAPTER ".concat(counter, "/").concat(maxCount)
      },
      customComponent: /*#__PURE__*/_jsxs(ButtonGroup, {
        disableElevation: true,
        children: [/*#__PURE__*/_jsx(Button, {
          variant: "text",
          onClick: handlePrev,
          children: /*#__PURE__*/_jsx(Icon, {
            icon: ICONS_NAME.chevronLeft,
            color: theme.palette.text.disabled
          })
        }), /*#__PURE__*/_jsx(Button, {
          variant: "text",
          onClick: handleNext,
          children: /*#__PURE__*/_jsx(Icon, {
            icon: ICONS_NAME.chevronRightLarge
          })
        })]
      })
    })]
  });
};