@wulperstudio/cms/organisms/TabsDrawerScroll/TabsDrawerScroll.js

Wulper Studio Library Components CMS

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["children", "value", "index"];
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",
    id: "tabsFixed"
  }, props));
})({
  '& .MuiTabs-indicator': {
    display: 'flex',
    justifyContent: 'center',
    backgroundColor: 'transparent',
    maxHeight: '5px',
    height: '5px',
    borderRadius: '10px'
  }
});
var StyledTab = styled(function (props) {
  return /*#__PURE__*/_jsx(Tab, Object.assign({}, props));
})(function (_ref) {
  var theme = _ref.theme;
  return {
    textTransform: 'none',
    fontWeight: theme.typography.fontWeightRegular,
    fontSize: '14px',
    fontFamily: 'Poppins, cursive',
    marginRight: theme.spacing(2.5),
    color: '#223263',
    border: '1px solid ##2236CB',
    borderRadius: '15px',
    backgroundColor: '#F7F8FD',
    padding: '0px 16px',
    minHeight: '44px',
    '&.Mui-selected': {
      backgroundColor: ' #2236CB',
      color: '#fff',
      fontWeight: theme.typography.fontWeightMedium
    }
  };
});
function TabPanel(props) {
  var children = props.children,
    value = props.value,
    index = props.index,
    other = _objectWithoutProperties(props, _excluded);
  return /*#__PURE__*/_jsx("div", Object.assign({
    role: "tabpanel",
    hidden: value !== index,
    id: "simple-tabpanel-".concat(index),
    "aria-labelledby": "simple-tab-".concat(index)
  }, other, {
    children: value === index && /*#__PURE__*/_jsx(Box, {
      sx: {
        padding: '0px 10px'
      },
      children: children
    })
  }));
}
export var TabsDrawerScroll = function TabsDrawerScroll(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: {
        backgroundColor: '#fff',
        maxWidth: '100%',
        position: 'sticky',
        top: 0,
        zIndex: 99
      },
      ref: props.boxRef,
      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());
    })]
  });
};