@wulperstudio/cms/node/molecules/ListLogos/index.js

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ListLogos = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _uuid = require("uuid");
var _material = require("@mui/material");
var _styled = require("./styled");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["sx"],
  _excluded2 = ["direction", "gap", "alignItems", "flexWrap", "justifyContent"];
var ListLogos = exports.ListLogos = function ListLogos(_ref) {
  var blockProps = _ref.blockProps,
    containerProps = _ref.containerProps,
    logos = _ref.logos,
    _ref$variant = _ref.variant,
    variant = _ref$variant === void 0 ? 'block' : _ref$variant;
  var _ref2 = containerProps || {},
    sx = _ref2.sx,
    rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
  var _ref3 = blockProps || {},
    _ref3$direction = _ref3.direction,
    direction = _ref3$direction === void 0 ? 'row' : _ref3$direction,
    _ref3$gap = _ref3.gap,
    gap = _ref3$gap === void 0 ? 4 : _ref3$gap,
    _ref3$alignItems = _ref3.alignItems,
    alignItems = _ref3$alignItems === void 0 ? 'center' : _ref3$alignItems,
    _ref3$flexWrap = _ref3.flexWrap,
    flexWrap = _ref3$flexWrap === void 0 ? 'wrap' : _ref3$flexWrap,
    _ref3$justifyContent = _ref3.justifyContent,
    justifyContent = _ref3$justifyContent === void 0 ? 'space-evenly' : _ref3$justifyContent,
    restBlockProps = (0, _objectWithoutProperties2["default"])(_ref3, _excluded2);
  if (variant === 'swipe') {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, Object.assign({
      className: "logos",
      sx: Object.assign({
        overflow: 'hidden',
        padding: '60px 0',
        whiteSpace: 'nowrap',
        width: '100%',
        display: 'flex'
      }, sx)
    }, rest, {
      children: Array(2).fill(0).map(function (_e) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
          className: "logos-slide",
          sx: {
            display: 'inline-block',
            flexShrink: 0,
            whiteSpace: 'nowrap',
            animation: '25s slide infinite linear',
            '@keyframes slide': {
              from: {
                transform: 'translateX(0)'
              },
              to: {
                transform: 'translateX(-100%)'
              }
            }
          },
          children: logos.map(function (_ref4) {
            var alt = _ref4.alt,
              src = _ref4.src;
            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
              sx: {
                display: 'inline-block',
                margin: '0 40px'
              },
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
                component: "img",
                className: "image-logo",
                src: src,
                alt: alt,
                sx: {
                  aspectRatio: '3/2',
                  objectFit: 'contain',
                  maxHeight: '50px'
                }
              })
            }, (0, _uuid.v4)());
          })
        }, (0, _uuid.v4)());
      })
    }));
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, Object.assign({
    sx: Object.assign({}, sx)
  }, rest, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, Object.assign({
      direction: direction,
      gap: gap,
      alignItems: alignItems,
      flexWrap: flexWrap,
      justifyContent: justifyContent
    }, restBlockProps, {
      children: logos.map(function (_ref5) {
        var alt = _ref5.alt,
          src = _ref5.src;
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.Image, {
          className: "image-logo",
          src: src,
          alt: alt
        }, alt);
      })
    }))
  }));
};