@wulperstudio/cms/organisms/TabsCmp/TabsCmp.js

Wulper Studio Library Components CMS

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
var _span;
import React from 'react';
import { v4 } from 'uuid';
import { styled } from '@mui/material/styles';
import { Tabs, Tab, Box } from '@mui/material';
import { jsx as _jsx } from "react/jsx-runtime";
var StyledTabs = styled(function (props) {
  return /*#__PURE__*/_jsx(Tabs, Object.assign({
    variant: "scrollable",
    scrollButtons: false,
    "aria-label": "scrollable menu"
  }, props, {
    TabIndicatorProps: {
      children: _span || (_span = /*#__PURE__*/_jsx("span", {
        className: "MuiTabs-indicatorSpan"
      }))
    }
  }));
}, {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'colorIndicator';
  }
})(function (props) {
  return {
    '& .MuiTabs-indicator': {
      display: 'flex',
      justifyContent: 'flex-start',
      backgroundColor: 'transparent',
      maxHeight: '5px',
      height: '5px',
      borderRadius: '10px'
    },
    '& .MuiTabs-indicatorSpan': {
      // maxWidth: 40,
      maxHeight: '5px',
      height: '5px',
      width: '100%',
      borderRadius: '10px',
      backgroundColor: props.colorIndicator
    }
  };
});
var StyledTab = styled(function (props) {
  return /*#__PURE__*/_jsx(Tab, Object.assign({}, props));
})(function (_ref) {
  var theme = _ref.theme,
    colorSelected = _ref.colorSelected;
  return {
    textTransform: 'none',
    fontWeight: theme.typography.fontWeightRegular,
    fontSize: '18px',
    fontFamily: 'Poppins, cursive',
    marginRight: theme.spacing(1),
    textAlign: 'left',
    color: '#000',
    // paddingLeft: 0,
    '&.Mui-selected': {
      color: colorSelected,
      fontWeight: theme.typography.fontWeightMedium
    }
  };
});
export var TabsCmp = function TabsCmp(props) {
  var _React$useState = React.useState(0),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    value = _React$useState2[0],
    setValue = _React$useState2[1];
  var handleChange = function handleChange(event, newValue) {
    setValue(newValue);
  };
  return /*#__PURE__*/_jsx(Box, {
    sx: {
      maxWidth: '100%'
    },
    children: /*#__PURE__*/_jsx(StyledTabs, {
      value: value,
      onChange: handleChange,
      colorIndicator: props.colorIndicator,
      children: props.arrTabs.map(function (arr) {
        return /*#__PURE__*/_jsx(StyledTab, {
          label: arr,
          colorSelected: props.colorSelected
        }, v4());
      })
    })
  });
};