@wulperstudio/cms/organisms/TabsAvatar/TabsAvatar.js

Wulper Studio Library Components CMS

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React from 'react';
import { v4 } from 'uuid';
import { AvatarV2 } from '../../components/AvatarV2';
import { WraperComponent, WrapperTabs, WrapperTab, StyledTabs, TabPanel } from './styled';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var TabsAvatar = function TabsAvatar(props) {
  var _props$componentsProp;
  var _React$useState = React.useState(0),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    value = _React$useState2[0],
    setValue = _React$useState2[1];
  var handleChange = function handleChange(newValue) {
    setValue(newValue);
  };
  return /*#__PURE__*/_jsxs(WraperComponent, {
    children: [/*#__PURE__*/_jsx(WrapperTabs, {
      padding: props == null || (_props$componentsProp = props.componentsProps) == null || (_props$componentsProp = _props$componentsProp.root) == null ? void 0 : _props$componentsProp.padding,
      children: /*#__PURE__*/_jsx(StyledTabs, {
        value: value,
        variant: "scrollable",
        scrollButtons: false,
        children: props.data.map(function (_ref, i) {
          var _props$componentsProp2;
          var tab = _ref.tab;
          return /*#__PURE__*/_jsx(WrapperTab, {
            onClick: function onClick() {
              return handleChange(i);
            },
            children: /*#__PURE__*/_jsx(AvatarV2, Object.assign({}, props == null || (_props$componentsProp2 = props.componentsProps) == null ? void 0 : _props$componentsProp2.tabs, {
              children: tab
            }))
          }, v4());
        })
      })
    }), /*#__PURE__*/_jsx("div", {
      children: props.data.map(function (_ref2, i) {
        var items = _ref2.items;
        return /*#__PURE__*/_jsx(TabPanel, {
          value: value,
          index: i,
          children: items
        }, v4());
      })
    })]
  });
};