@wulperstudio/cms/organisms/TabsGrid/TabsGrid.js

Wulper Studio Library Components CMS

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
/* eslint-disable react/jsx-no-useless-fragment */
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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
var StyledTabs = styled(function (props) {
  return /*#__PURE__*/_jsx(Tabs, Object.assign({
    variant: "scrollable",
    scrollButtons: false,
    "aria-label": "scrollable menu"
  }, props));
})(function (_ref) {
  var theme = _ref.theme;
  return {
    '& .MuiTabs-indicator': {
      display: 'flex',
      justifyContent: 'center',
      backgroundColor: theme.palette.primary.main,
      maxHeight: '5px',
      height: '5px',
      borderRadius: '10px'
    }
  };
});
var StyledTab = styled(function (props) {
  return /*#__PURE__*/_jsx(Tab, Object.assign({}, props));
})(function (_ref2) {
  var theme = _ref2.theme;
  return {
    textTransform: 'none',
    fontWeight: theme.typography.fontWeightRegular,
    fontSize: '16px',
    fontFamily: 'Poppins, cursive',
    marginRight: theme.spacing(2.5),
    color: theme.palette.text.secondary,
    borderRadius: '0px',
    backgroundColor: theme.palette.background.paper,
    padding: '0px 16px',
    '&.Mui-selected': {
      color: theme.palette.primary.main,
      fontWeight: theme.typography.fontWeightMedium
    }
  };
});
function TabPanel(props) {
  var children = props.children,
    value = props.value,
    index = props.index;
  return /*#__PURE__*/_jsx(_Fragment, {
    children: value === index && /*#__PURE__*/_jsx("div", {
      style: value === index ? {
        height: '100%',
        overflowY: 'auto'
      } : {
        height: 0
      },
      children: children
    })
  });
}
export var TabsGrid = function TabsGrid(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__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(Box, {
      sx: {
        maxWidth: '100%',
        bgcolor: props.backgroundColor,
        marginTop: '0px',
        padding: '0px 10px',
        display: 'flex',
        alignItems: 'center',
        borderBottom: '1px solid #ECECFB'
      },
      children: /*#__PURE__*/_jsx(StyledTabs, {
        value: value,
        onChange: handleChange,
        children: props.tabs.map(function (tab) {
          return /*#__PURE__*/_jsx(StyledTab, {
            label: tab.label
          }, v4());
        })
      })
    }), props.tabs.map(function (tab, i) {
      return /*#__PURE__*/_jsx(TabPanel, {
        value: value,
        index: i,
        children: tab.items
      }, v4());
    })]
  });
};