@wulperstudio/cms/layouts/TagTitleDescription/TagTitleDescription.js

Wulper Studio Library Components CMS

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["description", "tag", "title", "stackProps"];
import React from 'react';
import { Box, Container, Stack, useTheme } from '@mui/material';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var TagTitleDescription = function TagTitleDescription(_ref) {
  var description = _ref.description,
    tag = _ref.tag,
    title = _ref.title,
    stackProps = _ref.stackProps,
    props = _objectWithoutProperties(_ref, _excluded);
  var theme = useTheme();
  return /*#__PURE__*/_jsx(Container, Object.assign({
    component: "section",
    maxWidth: "xl"
  }, props, {
    children: /*#__PURE__*/_jsxs(Stack, Object.assign({
      justifyContent: "center",
      alignItems: "center",
      rowGap: "15px"
    }, stackProps, {
      children: [tag && /*#__PURE__*/_jsx(Box, {
        sx: {
          backgroundColor: tag.backgroundColor || theme.palette.primary.light,
          borderRadius: '10px',
          color: tag.color || theme.palette.primary.main,
          p: '8px 16px'
        },
        children: tag.title
      }), /*#__PURE__*/_jsxs(Box, {
        children: [title, description]
      })]
    }))
  }));
};