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

Wulper Studio Library Components CMS

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["sx"],
  _excluded2 = ["direction", "gap", "alignItems", "flexWrap", "justifyContent"];
import React from 'react';
import { v4 } from 'uuid';
import { Box, Stack } from '@mui/material';
import { Image } from './styled';
import { jsx as _jsx } from "react/jsx-runtime";
export var 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 = _objectWithoutProperties(_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 = _objectWithoutProperties(_ref3, _excluded2);
  if (variant === 'swipe') {
    return /*#__PURE__*/_jsx(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__*/_jsx(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__*/_jsx(Box, {
              sx: {
                display: 'inline-block',
                margin: '0 40px'
              },
              children: /*#__PURE__*/_jsx(Box, {
                component: "img",
                className: "image-logo",
                src: src,
                alt: alt,
                sx: {
                  aspectRatio: '3/2',
                  objectFit: 'contain',
                  maxHeight: '50px'
                }
              })
            }, v4());
          })
        }, v4());
      })
    }));
  }
  return /*#__PURE__*/_jsx(Box, Object.assign({
    sx: Object.assign({}, sx)
  }, rest, {
    children: /*#__PURE__*/_jsx(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__*/_jsx(Image, {
          className: "image-logo",
          src: src,
          alt: alt
        }, alt);
      })
    }))
  }));
};