@wulperstudio/cms/node/organisms/Blocks/BlockMap/index.js

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BlockMap = void 0;
var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _uuid = require("uuid");
var _react2 = require("@iconify/react");
var _material = require("@mui/material");
var _components = require("./components");
var _GridCards = require("../../GridCards");
var _consts = require("../../../helpers/consts");
var _icons = require("../../../helpers/icons");
var _jsxRuntime = require("react/jsx-runtime");
var BlockMap = exports.BlockMap = function BlockMap(_ref) {
  var background = _ref.background,
    href = _ref.href,
    tags = _ref.tags;
  var theme = (0, _material.useTheme)();
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
    width: "100%",
    rowGap: "25px",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
      component: "article",
      sx: {
        background: "url(".concat(background || _consts.consts.backgroundImageDefault, ") no-repeat center"),
        width: '100%',
        height: '100%',
        margin: '0 auto',
        borderRadius: '10px',
        minHeight: 400,
        position: 'relative',
        backgroundSize: 'cover'
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
        sx: {
          position: 'absolute',
          top: 20,
          right: 20,
          zIndex: 2,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          transition: 'color .2s',
          '&:hover': {
            cursor: 'pointer'
          }
        },
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
          variant: "contained",
          color: "primary",
          component: "a",
          href: href,
          target: "_blank",
          disableElevation: true,
          sx: {
            textTransform: 'none'
          },
          endIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
            icon: _icons.ICONS_NAME.chevronRight,
            color: theme.palette.background["default"]
          }),
          children: "Google maps"
        })
      })
    }), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridCards.GridCards, {
      sx: {
        width: '100%',
        p: '1rem',
        gap: '20px'
      },
      gridColumns: "repeat(auto-fill, minmax(200px, 1fr))",
      children: tags.map(function (_ref2) {
        var props = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref2), _ref2));
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BoxTag, Object.assign({}, props), (0, _uuid.v4)());
      })
    })]
  });
};