@gsretail.com/gui-core/build/esm/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"tslib";import t from"react";import o 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"@gsretail.com/gui-icons";import"@mui/material/styles";import l from"../../../../assets/theme/basicStyle.js";var c,m=o(e)(c||(c=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})),p=function(n){var o=n.index,e=n.page,c=n.onCloseTab,p=n.onSelectTab,s=n.style;return t.createElement(m,{className:"PageTab",key:e.id,value:e.id,onClick:function(){return p(e,o)},style:s,label:t.createElement(t.Fragment,null,t.createElement(i,{variant:"body1",noWrap:!0},e.title),t.createElement(r,{variant:"clear",size:"tiny",onClick:function(){return c(e,o)},style:{position:"absolute",right:0}},t.createElement(a,{color:l.color.grey500})))})};export{p as default};