@gsretail.com/gui-core/build/core/Section/PageTabs/view/PageTabView.js

A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook

import{__makeTemplateObject as n}from"../../../../node_modules/tslib/tslib.es6.js";import o from"react";import t from"@emotion/styled";import{Tab as e,Typography as i}from"@mui/material";import{GuiIconButton as r}from"../../../Button/GuiIconButton.js";import{CloseSmall as a}from"../../../../node_modules/@gsretail.com/gui-icons/dist/index.js";import"@mui/material/styles";import l from"../../../../assets/theme/basicStyle.js";var s,m=t(e)(s||(s=n(["\n  padding: 0 ;\n  background-color:  ",";\n  border: 1px solid ",";\n  height: 30px;\n  opacity: 1;\n  flex-direction: row;\n  min-width: 150px;\n  width: 100%;\n  min-height: unset;\n\n  .MuiTypography-root  {\n    padding: 0 24px 0 8px;\n    font-size: ",";\n    font-weight: ",";\n  }\n\n  .MuiIconButton-root {\n    & svg {\n      color: red;\n    }\n  }\n"],["\n  padding: 0 ;\n  background-color:  ",";\n  border: 1px solid ",";\n  height: 30px;\n  opacity: 1;\n  flex-direction: row;\n  min-width: 150px;\n  width: 100%;\n  min-height: unset;\n\n  .MuiTypography-root  {\n    padding: 0 24px 0 8px;\n    font-size: ",";\n    font-weight: ",";\n  }\n\n  .MuiIconButton-root {\n    & svg {\n      color: red;\n    }\n  }\n"])),l.color.grey200,l.color.grey300,l.font.size[12],(function(n){return n.theme.typography.fontWeightMedium})),c=function(n){var t=n.index,e=n.page,s=n.onCloseTab,c=n.onSelectTab,d=n.style;return o.createElement(m,{className:"PageTab",key:e.id,value:e.id,onClick:function(){return c(e,t)},style:d,label:o.createElement(o.Fragment,null,o.createElement(i,{variant:"body1",noWrap:!0},e.title),o.createElement(r,{variant:"clear",size:"tiny",onClick:function(){return s(e,t)},style:{position:"absolute",right:0}},o.createElement(a,{color:l.color.grey500})))})};export{c as default};